Ajax循环插入数据后统计成功次数，弹窗总是显示0如何解决

问题原因 #

你的代码问题出在$.ajax默认是异步请求：for循环仅负责将10个请求批量发送出去，不会等待请求返回结果就会直接执行后续的alert(c)逻辑。此时所有请求的success回调还没有触发，计数变量c仍然是初始值0，所以弹框始终显示0。

解决方案 #

方案1：回调内判断请求完成状态 #

在每次请求的回调函数中判断是否所有请求都已执行完毕，全部完成后再触发弹框：

var c = 0; // 初始化成功计数器
const totalRequest = 10; // 总请求数
function add(){
  for (let i = 0; i < totalRequest; i++) {
    $.ajax({
      type: "POST",
      url: "insert.php",
      data: {
        id: id,
        name: name,
        email: email,
      },
      dataType: "json",
      success: function (res) {
        c++;
        checkAllDone();
      },
      error: function() {
        // 如果需要将失败请求也计入总次数，取消下方注释即可
        // c++;
        checkAllDone();
      }
    });
  }

  // 统一判断是否所有请求执行完毕
  function checkAllDone() {
    if(c === totalRequest) {
      alert(c);
      // 每次执行完重置计数器，避免重复调用add时计数错误
      c = 0;
    }
  }
}

注意：循环变量建议用let替代var，避免因变量提升导致每次请求传参都是最后一次的数值。

方案2：基于Promise批量等待所有请求完成 #

jQuery 3.0+版本中$.ajax本身返回Promise对象，可以配合$.when统一等待所有请求执行完毕后再处理：

function add(){
  const requests = [];
  for (let i = 0; i < 10; i++) {
    requests.push($.ajax({
      type: "POST",
      url: "insert.php",
      data: {
        id: id,
        name: name,
        email: email,
      },
      dataType: "json"
    }));
  }

  $.when.apply($, requests)
  .done(function() {
    // arguments长度就是成功执行的请求数量
    alert(arguments.length);
  })
  .fail(function() {
    alert("存在请求执行失败");
  });
}

内容的提问来源于stack exchange，提问作者for main