使用ajax更新多個區域

我最近開始學習ajax和javascript，並且仍然掌握了它。但我有一個簡單的目標，我試圖達到目標，而我已經到了一半。使用ajax更新多個區域

例如。我正在努力管理由一位用戶保存的供其他成員使用的書籤。我已經構建了可以在頁面上實時添加，編輯和刪除項目的代碼。但是，我如何學習如何編輯部分是'點擊字段區域'開始編輯，然後'點擊字段區域'，完成更新。我真的想改變這種方式來點擊一個按鈕來提交編輯。

此外，在頁面上它有刪除選項旁邊的「查看書籤」按鈕，但我不知道如何更新該鏈接，當我更新其文本區域而無需刷新頁面。

所以基本上我想學習一種更有效的方法來通過ajax進行實時更新，然後當更新完成時，更新頁面上相同項目的所有實例（只有兩個區域）。

任何幫助將不勝感激。

我可以發表我的原始代碼，但我想我可能會更好地向一些知道更好的人學習。大聲笑

來源

2016-01-24 logicK

那麼，所有這些更新必須手動完成。如果你的對象重複，你可以按（css類，attr名，html對象）對它們進行分組，然後通過jQuery選擇器進行迭代。 [https://api.jquery.com/each/](https://api.jquery.com/each/） – Valijon

發佈您的原始代碼是個好主意，這樣這裏的人就可以看到您嘗試過的內容並可以幫助您更好。 – dee

這是一個通用的問題，所以我會回答一般的答案。

如果你有，例如，2 div小號

<div id="area1"></div> 
<div id="area2"></div>

而且你要撥打的服務器，並獲得2個數據的每個div，所以看起來這會：（我使用jQuery爲的例子..

$.ajax({ 
    url:'server_url', 
    method: 'post', 
    success: function(data) { 
     $('#area1').html(data.objForArea1); 
     $('#area2').html(data.objForArea2); 
    } 
});

從服務器返回（例如）的JSON

{ 
    objForArea1: '<div class="list-item">item 1</div>...' 
    objForArea2: '<div class="list-item">item 1</div>...' 
}

因此，您從ajax調用返回的對象讀取響應，然後將數據放到任何地方。

來源

2016-01-24 11:27:48

使用ajax更新多個區域

回答

相關問題