Question

这是我的剧本：

$("#search").on("click", function () {
  $("#search_tutor").submit(function () {
      data = $(this).serialize() + "&" + $.param(data);
      $.ajax({
          type: "POST",
          dataType: "json",
          url: "fetch_tutor.php",
          data: data,
          success: function (data) {
              alert(data);
          }
      });
      return false;
  });
});

我面临的问题是：

当我第一次点击$("#search")时，alert(data);会出现一次。当我第二次点击$("#search")时alert(data);出现两次。所以当我点击以下时间时会发生这种情况。取决于我多次点击$("#search")多次出现alert(data);。根据我的理解，这表明$("#search_tutor")已多次提交。因为我在ajax函数之后使用return false来阻止页面重新加载。但是当我刷新页面时alert(data);只出现一次。我试过了：

1）删除return false，但它会重新加载我不想发生的页面，因为它没有将我收到的结果附加到ajax调用指定的div。

这不会有任何改变 2）

 $("#search_tutor").submit(function(event){
                event.preventDefault();

单击按钮后不允许任何操作 3）

$("#search").on("click",function(event){
    event.preventDefault();

我能想到的唯一解决方案是，在每次调用ajax后重新加载页面，但需要将ajax的结果附加到指定的div中。但是，我该怎么做呢？

Answer 1

问题是你是在一个点击处理程序中注册提交处理程序，所以每次点击按钮都会注册一个新的提交处理程序。

因此，第二次单击该按钮将调用提交处理程序两次，发送两次ajax请求。

无需使用点击处理程序，只需使用提交事件

即可

$("#search_tutor").submit(function() {

  var data = $(this).serialize() + "&" + $.param(data);

  $.ajax({
    type: "POST",
    dataType: "json",
    url: "fetch_tutor.php",
    data: data,
    success: function(data) {
      alert(data);
    }
  });
  return false;
});

表格虽然被阻止，但多次提交

1 个答案: