在每次 ajax 插入后增加一个计数器，然后将其显示为消息

Posted 2023-05-08

【中文标题】在每次 ajax 插入后增加一个计数器，然后将其显示为消息

【英文标题】：increment a counter after each ajax insert then show it as a message

【发布时间】：2022-01-11 02:34:27

【问题描述】：

我正在使用 Ajax 通过 php 将数据插入 mysql，请参阅下面的代码：

var c = 0;//initialize counter
function add()
  for (var i = 0; i < 10; i++) 
    $.ajax(
      type: "POST",
      url: "insert.php",
      data: 
        id: id,
        name: name,
        email: email,
      ,
      dataType: "json",
      success: function (res) 
        c++;//increment counter
      ,
    );
  
  alert(c);//display counter

我想要做的是在 for 循环结束后显示警报（插入操作完成的次数）。我已经像上面的代码那样做了它不起作用。它总是显示为零。

有没有办法实现同样的功能？

【问题讨论】：

要显示您需要将alert(c) 放入success 处理函数中的值。但是，此代码存在一些主要问题。首先，alert() 会在通知被解除之前阻止 JS 继续。我强烈建议您改用console.log(c)。其次，用 10 个请求淹没你的服务器是一个非常糟糕的主意。你的实际目标是什么 - 因为这段代码似乎是多余的。

我使用 alert 只是为了测试。你这样做的替代方法是什么？我正在使用学生评分表，我想将每条记录插入数据库。

向您的服务器发送一个请求，其中包含所有 10 个学生的详细信息，然后在服务器端循环访问数据

当前代码的另一个问题是 Ajax 是异步的（非阻塞），因此警报将在第一个响应甚至返回到客户端之前立即执行。

@Rory McCrossan，您能否提供一个代码示例作为答案？你的建议是什么？

【参考方案1】：

这种方式行得通。

var c = 0;
async function add() 
    for (var i = 0; i < 10; i++) 
        await $.ajax(
            type: "POST",
            url: "https://upwork.codefusiontm.com/stack/002",
            data: 
                id: "id",
                name: "name",
                email: "email",
            ,
            dataType: "json",
            success: function (res) 
                c++;//increment counter
            ,
        );
    


$(() => 
    add().then(() => 
        console.log("=>",c)
    )
)

您需要使用 promise 和 async 和 wait。您使用 async 并将 add 方法创建为 async

async function add() 

之后，您在 $.ajax 中添加 await 因为只有这样 ajax 只会在 POST 返回后增加 c++，这必须这样做，因为您在 for 中启动多个 POST，因此必须等待每个完成才能正确递增。

await $.ajax(

综上，你终于可以得到变量c

的值了

$(() => 
    add().then(() => 
        console.log("=>",c)
    )
)

别忘了，方法调用必须在document.ready

中进行

$(() => 
)

【参考方案2】：

考虑以下内容。

var c = 0; //initialize counter
function add() 
  for (var i = 0; i < 10; i++) 
    $.ajax(
      type: "POST",
      url: "insert.php",
      data: 
        id: id,
        name: name,
        email: email,
      ,
      dataType: "json",
      success: function(res) 
        c++;
        if (i == 10) 
          alert(c); //display counter
        
      ,
    );
  

当你执行最后一个循环时，i 将是 9，然后递增到 10。所以我们可以检查 i 是否等于 10，然后我们知道循环已经运行了最后一次。