在jquery ajax成功处理程序中添加递增变量

pftdvrlh 于 2023-05-06 发布在 jQuery

关注(0)|答案(1)|浏览(84)

我想增加变量ii的值，但它的值没有改变。如果我在调用alert函数之前移动ii++;，它会增加，但设置为#spanstatus的值始终是0。我如何增加ii的值，并在调用$.ajax之前仍然访问它？

<html> 
      <span id="spanstatus"></span><br>

<script src="../js/jquery-1.12.4.min.js"></script>
<script>
var data = new FormData();
data.append('test', 'a');
data.append('test1', 'b');
data.append('test2', 'c');

function upload() {
        $('#spanstatus').html('');
        var ii=0;
        for(var [name, value] of data) {
            $('#spanstatus').append('<i>Uploading <b>"'+name+'"</b></i>...<span id="spanupload_'+ii+'">'+ii+'</span><br>');
                $.ajax({
                    type:'POST',
                    method: 'POST',
                    timeout:2000,
                    url:'upload.php?val='+value,
                    dataType: "json",
                    data:  value,
                    contentType: false,
                    cache: false,
                    processData:false,
                    // async: false,
                    success:function(response){
                            $('#spanupload_'+ii).html(ii+' OK');
                            alert(ii+'ok='+name);
                            ii++;
                    }
                });
        }
}

$(document).ready(function(){
    upload();
});

</script>
 </body> 
</html>

jquery

来源：https://stackoverflow.com/questions/76178166/add-incremented-variable-in-jquery-ajax-success-handler

1条答案

按热度按时间

6qftjkof1#

success处理程序在接收到响应之前不会执行，因为这是一个异步处理程序。这意味着每次调用$('#spanstatus').append时，ii的值都不会更改。
您可以移动ii的增量，使其发生在$('#spanstatus').append之前，但这会引入一个新问题。在success处理程序中，ii将为data中的每个对象递增一次，因此当您调用$('#spanupload_'+ii).html(ii+' OK')时，它将始终具有相同的值-在本例中为3。
为了在for of循环中保持对 each iteration 的引用，必须在该迭代中创建一个值为ii的局部块范围变量。您需要对name执行相同的操作。代码如下所示：

var data = new FormData();
data.append('test', 'a');
data.append('test1', 'b');
data.append('test2', 'c');

function upload() {
  $('#spanstatus').html('');
  var ii = 0;
  for (var [name, value] of data) {
    ii += 1;
    const nextii = ii;
    const nextName = name;

    $('#spanstatus').append('<i>Uploading <b>"' + nextName + '"</b></i>...<span id="spanupload_' + nextii + '">' + nextii + '</span><br>');
    $.ajax({
      type: 'POST',
      method: 'POST',
      timeout: 2000,
      url: 'upload.php?val=' + value,
      dataType: "json",
      data: value,
      contentType: false,
      cache: false,
      processData: false,
      // async: false,
      success: function(response) {
        $('#spanupload_' + nextii).html(nextii + ' OK');
        alert(nextii + 'ok=' + nextName);
      }
    });
  }
}

$(document).ready(function() {
  upload();
});

我创建了一个fiddle作为参考。

赞(0）回复(0）举报 2023-05-06

我来回答

在jquery ajax成功处理程序中添加递增变量

1条答案

相关问题

热门标签

最新问答