Question

我有一个功能：

function blur_slide_visit_count(){
    $.ajax({
        type: 'POST',
        url: 'add_save_slide_visitor_count.php',
        async: false,
        data: { fillvalue: fieldArray },
        success : function(){}
    });
}

我也有一个元素：

<input class="btn btn-default btn1" type="submit" id="submit-btn">

我已将一个监听器附加到调用该函数的输入：

$("#submit-btn").click(function() {
    blur_slide_visit_count();
    $("form").submit();
});

我期望发生的是当用户点击输入时，调用该函数并执行AJAX，调用应该更新我的数据库的PHP页面。但是，当我单击按钮时，数据库永远不会更新。我认为AJAX通话正在下降，但我不知道为什么。

任何人都可以帮忙解释为什么上述代码无效吗？

Answer 1

您必须先使用preventDefault（）停止提交表单，因为您要使用ajax.Just将event.preventDefault();添加到点击处理程序的顶部，然后放置您的代码。

 $("#submit-btn").click(function(event) { 
    event.preventDefault(); 
    ....
 });

Answer 2

为什么使用async = false - 这不应该使用，它阻止用户与ajax调用时间的页面交互，接下来的事情 - 一些html元素有默认行为，默认绑定，比如 - form和submit，默认行为是发送表单，避免在绑定时应使用 preventDefault（）：

$("#submit-btn").submit(function(e) {

   e.preventDefault();
   blur_slide_visit_count();
});

看看我绑定提交而非点击（良好做法），如果你需要绑定点击，使用按钮不输入，那么点击将不会触发提交事件。

将您的输入更改为（非常重要的类型=“按钮” ps.type =“submit”将触发表单上的提交）：

<button class="btn btn-default btn1" type="button" id="submit-btn">

然后绑定它（在这种情况下我们不需要使用preventDefault ）

$("#submit-btn").click(function(e) {

   blur_slide_visit_count();
});

最后一件事，如果你需要在ajax之后调用submit然后更改你的函数（我添加了函数 - 在ajax调用之后调用回调）：

function blur_slide_visit_count(callback){
  $.ajax({
  type: 'POST',
  url: 'add_save_slide_visitor_count.php',
  async: true,
  data: { fillvalue: fieldArray },
  success : function(){

   //call callback after ajax
   callback();
}
});
}

然后绑定看起来像：

$("#submit-btn").click(function(e) {

   blur_slide_visit_count(function(){
       $("form").submit();
   });
});

没有使用其他表单SUMBIT

2 个答案: