AJAX/JQuery:提交表单和调用函数而不刷新页面 - AJAX/JQuery: Submit form and call function without refreshing page

AJAX/JQuery: Submit form and call function without refreshing page

我正在尝试使用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是我想在提交表单时调用的函数，但截至目前，当我单击提交时，表单刷新并且不显示任何结果。任何帮助将不胜感激。提前谢谢。

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

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