要在Div中发布的Javascript
要在Div中发布的Javascript
提问于 2018-10-30 04:58:00
我有下面的代码，我需要它来在div中发布帖子。
<script type="text/javascript">
$(function() {
$(".loader").click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
<form method="post">
some random inputs and checkbox's goes here
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
提交时，javascript成功地加载了名为“consulta_produto.php”的div中的内容，但是，我需要调整脚本以使其也可以发布。
另一个话题的人建议用$(".loader").parent("form").submit代替$(".loader").click，但是我不明白他的意思，我尝试了很多不同的方法来改变它，但都没有成功
我研究了一些关于如何使用javascript发布内容的主题，但是我不能修改它们中的任何一个来保持在div“consulta_produto.php”中加载内容的功能。
所以我想知道，当我从一些输入和复选框中发送数据时，如何调整我的javascript以保持在content div中加载consulta_produto.php？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-30 07:31:25
首先，您需要执行以下任一操作：
- 将所有
<script>代码放在相关的超文本标记语言加载之后，或者 - 将其全部包装在
$(document).ready(function() {...});中，以达到与
相同的效果
然后，您可以在表单click()事件中执行代码，而不是在输入submit()事件中执行代码。(这基本上就是你在另一个主题中提到的某人告诉你的)。我将您的提交输入更改为提交按钮，这并不重要。
因此，不是加载href属性，而是将表单本身的action属性加载到div中。
当然，您希望将实际数据与表单一起提交--没问题。您只需使用AJAX方法。这是为了阻止页面重新加载。
首先，您执行preventDefault()来停止通常的页面重载。然后初始化$.ajax()方法。
- data :第一个参数'data‘包含要传递的所有表单数据。
- 类型:表示请求(POST)的类型
- URL:这是表单操作成功最后，’
<div>.
‘参数包含一个将所有数据加载到指定成功中的函数
在PHP中避免页面重载时，AJAX是必不可少的，试试看吧！
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(event) {
event.preventDefault();
$.ajax({ //AJAX Method
data: $(this).serialize(), //Gets data from form
type: $(this).attr('method'), //Gets the method, in your case POST
url: $(this).attr('action'), //Gets the form action
success: function(r) {
$('#content').html(r); //Loads data into div
}
}); //End of AJAX Method
}); //End of form submit event
});
</script>这是你的HTML：
<div id="content" style="width:100%; height:500px; ">
</div>
<form id="form" action="/consulta/consulta_produto.php" method="post">
some random inputs and checkbox's goes here
<button type="submit">Consultar<button>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53053697
复制相关文章
相似问题