Question

首先，我是ajax的总菜鸟，并且这是第一次这样做！

我有一个数据表，我正在使用ajax进行更新，并且刚刚更新了一行，这很有效。

现在我需要扩展它以使用多个ajax调用来更新表中的多行，但这看起来很混乱，并重复大量代码，每次只有行ID会改变。

注意：我无法将整个表更新为一个ajax调用，因为并非所有行都需要更新，并且并非每行中的所有单元都需要更新。一些单元格包含固定信息，永远不需要更新。所以我只调用具有变化数据的单元格。

是否有更有效的方法来遍历多个ajax调用，以调用和更新表中的每一行？

我刚才的代码是这样的......

$.ajax({
 cache: false,
 url: 'updatetable.php',
 data: "rowid=1234",
 dataType: 'json',
 success: function(data) {
  $('#row1234 .col3').html("" + data[0] + "");
  $('#row1234 .col4').html("" + data[1] + "");
  $('#row1234 .col6').html("" + data[2] + "");
 }
});

$.ajax({
 cache: false,
 url: 'updatetable.php',
 data: "rowid=2222",
 dataType: 'json',
 success: function(data) {
  $('#row2222 .col3').html("" + data[0] + "");
  $('#row2222 .col4').html("" + data[1] + "");
  $('#row2222 .col6').html("" + data[2] + "");
 }
});

$.ajax({
 cache: false,
 url: 'updatetable.php',
 data: "rowid=3456",
 dataType: 'json',
 success: function(data) {
  $('#row3456 .col3').html("" + data[0] + "");
  $('#row3456 .col4').html("" + data[1] + "");
  $('#row3456 .col6').html("" + data[2] + "");
 }
});

Answer 1

唯一改变的是您发送的data和更新的roe，您可以将其放入数组并使用循环：

['1234', '2222', '3456'].forEach(function(id) {
  $.ajax({
    cache: false,
    url: 'updatetable.php',
    data: { rowid: id },
    dataType: 'json',
    success: function(data) {
      $(`#row${id} .col3`).html(data[0]);
      $(`#row${id} .col4`).html(data[1]);
      $(`#row${id} .col6`).html(data[2]);
    }
  });
});

然而，有一点需要注意的是，快速连续发送多个AJAX请求并不是一个好主意，因为如果你有任何相当数量的并发用户，它可以充斥服务器。更好的做法是使用所有数据进行一次调用 - 在您的情况下，使用rowid值数组。

Answer 2

请收集所有行ID并合并到Array中并将它们传递给ajax并从ajax获取所有响应并显示到表

<script>
     var array = new Array();
     array.push(row1_ID);
     array.push(row2_ID);
     array.push(row3_ID);
     var rowIDs = array.toString();
     $.ajax({
     cache: false,
     url: 'updatetable.php',
     data: {'row_ids':rowIDs},
     dataType: 'json',
     success: function(data) {
         /* Here you will get all the data of each every row */
            $rowData = $.parseJSON(data);       
            $.each( obj, function(row_id, rowData ) {
                 $('#row'+row_id +' .col3').html("" + rowData[0] + "");
                 $('#row'+row_id +'.col4').html("" + rowData[1] + "");
                 $('#row'+row_id +' .col6').html("" + rowData[2] + ""); 
            });
     }
    });
    </script>

如何更有效地进行多个ajax调用

2 个答案: