AJAX/JQuery:无需刷新页面即可提交表单和调用函数
AJAX/JQuery:无需刷新页面即可提交表单和调用函数
提问于 2015-01-20 00:32:30
我正在尝试使用ajax/jquery提交一个包含下拉菜单的表单，目的是根据表单输入显示来自MySQL数据库的信息。如果没有ajax/jquery，页面就能正常工作。但是，我不希望表单提交后页面刷新，以使选定的下拉选项保持显示。我的ajax/jquery不是很好，我知道这就是我遇到麻烦的地方。我的代码如下：
<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(){
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
success: displayResults
});
});
});
</script> 函数displayResults是我想要在提交表单时调用的函数，但是到目前为止，当我单击submit时，表单会刷新，不会显示任何结果。任何帮助都将不胜感激。提前谢谢。
回答 3
Stack Overflow用户
发布于 2015-01-20 00:37:36
<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(e){
e.preventDefault();
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
success: displayResults
});
});
});
</script> 这通过阻止触发事件来阻止表单提交。在vanilla javascript中，你可以在提交时返回false，这也是一样的。
Stack Overflow用户
发布于 2015-01-20 00:39:23
尝试使用这种方式提交表单，并防止使用e.preventdefualt()提交表单的默认行为，这将阻止事件触发，使用serializeArray()序列化表单数据，使用success和error调试ajax调用。
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
console.log(data); //display data Results
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(errorThrown); // dispaly error
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM Stack Overflow用户
发布于 2015-01-20 00:48:27
.submit()将与使用submit按钮相同。您必须将按钮与click事件一起使用。
<script>
$(document).ready(funtion(){
var data1 = $('#field1').val();
// the same with all the values
$('#button').click(function(){
$.ajax({
type: "POST",
data: ({dat1: data1} ),
cache: false,
success: function(data) {
displayResults();
}
});
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28029328
复制相关文章
相似问题
腾讯云开发者
