Question

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

Answer 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，它将是相同的。

Answer 2

尝试这种方式提交表单并阻止使用e.preventdefualt()提交表单的默认行为，这会阻止事件触发，要使用serializeArray()序列化表单数据，请使用success和{{ 1}}调试ajax调用。

error

Answer 3

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

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

3 个答案: