AJAX/JQuery：提交表单和调用函数而不刷新页面答案

【问题标题】：AJAX/JQuery: Submit form and call function without refreshing pageAJAX/JQuery：提交表单和调用函数而不刷新页面
【发布时间】：2015-01-19 16: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 是我要在提交表单时调用的函数，但截至目前，当我单击提交时，表单刷新并且没有显示结果。任何帮助将不胜感激。提前致谢。

【问题讨论】：

你必须阻止默认表单提交
好的。但是我的语法等是否正确？当我点击提交时，函数 displayResults 没有被调用。
不正确。您需要添加属性 url:$(this).attr('action') 才能按您的意愿工作。
附带说明，您可以使用var $this=$(this); 作为函数的第一行。它将通过减少调用 jQuery 库的次数来提高性能。

标签： javascript php jquery ajax forms

【解决方案1】：

<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，它会是一样的。

【讨论】：

请注意，有时浏览器可能不喜欢您使用e.preventDefault();。在这些情况下，拥有return false; 可能会有所帮助。此外，这用于防止事件在两个 fase 中传播（即使 jQuery 只处理 bubbling fase 上的事件。）

【解决方案2】：

尝试以这种方式提交表单并防止使用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

【讨论】：

【解决方案3】：

.submit() 将与使用提交按钮相同。您必须使用带有点击事件的按钮。

<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>

【讨论】：