Javascript AJAX/JQuery：提交表单和调用函数，无需刷新页面

我试图使用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>   

$（文档）.ready（函数（）{
变量$form=$（'form'）；
$form.submit（函数（）{
$.ajax({
类型：“POST”，
数据：$（this）.serialize（），
cache:false，
成功：显示结果
});
});
});

函数displayResults是我想在提交表单时调用的函数，但是现在，当我单击submit时，表单会刷新，并且不会显示任何结果。任何帮助都将不胜感激。提前感谢。

<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        data: $(this).serialize(), 
        cache: false,
        success: displayResults
    });
  });
});

</script>   

$（文档）.ready（函数（）{
变量$form=$（'form'）；
$form.submit（功能（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
数据：$（this）.serialize（），
cache:false，
成功：显示结果
});
});
});

---

这通过防止触发事件来防止表单提交。在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（）将与使用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>

$（文档）.ready（函数（）{
var data1=$（'#field1'）.val（）；
//所有的值都是一样的
$（“#按钮”）。单击（函数（）{
$.ajax({
类型：“POST”，
数据：（{dat1:data1}），
cache:false，
成功：功能（数据）{
显示结果（）；
}
});
});
});

您必须阻止默认表单submitOk。但我的语法等是否正确？当我单击submit时，函数displayResults没有被调用。它不正确。您需要添加属性

url:$（this）.attr（'action'）

，以使其按您的需要工作。作为旁注，您可以使用

var$this=$（this）作为函数中的第一行。它将通过减少调用jQuery库的次数来提高性能。在这些情况下，
返回false可能有帮助。此外，这还用于防止事件在两种fase中传播（即使jQuery只处理冒泡fase上的事件）