2017-10-07 61 views
-1

首先,我是ajax的總noob,第一次這樣做!如何更有效地進行多個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] + ""); 
} 
}); 
+0

能否請您解釋一下它 –

+0

我不想多次重複相同的代碼塊。這是非常混亂。每次只更改行ID號。那麼有沒有辦法讓這些AJAX調用循環,以減少重複代碼的數量? – Richard

+0

你可以檢查我的答案 –

回答

1

請收集所有的行ID和合併到陣列,並將它們傳遞給阿賈克斯,並從阿賈克斯和顯示該表的所有響應

<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> 
+0

當'dataType:'json''被設置時,不需要使用'parseJSON()'。返回到回調的數據將被解析 – charlietfl

+0

@charlietfl謝謝,我忘了它 –

1

作爲唯一改變的事情是data您發送和魚子這就是更新後,你可以把到一個數組,並使用循環:

['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值的數組。

相關問題