爲什麼jQuery.sortable的這個ajax執行更新多次？

這是這個問題的延續：jQuery UI Sortable, then write order into a database 爲什麼jQuery.sortable的這個ajax執行更新多次？

的問題是以下幾點：

我想使用jQuery UI的sortable功能允許用戶設置的順序，然後在變化，把它寫到數據庫並更新它。有人可以寫一個關於如何完成這個任務的例子嗎？

因爲我需要能夠快速重新排序的東西，我認爲這將是非常有用的。儘管接受的解決方案存在一個大問題。我在這裏引用答案：

下面是一個快速示例，一旦元素髮生位置變化就將數據發送到指定的URL。
$('#element').sortable({ 
    axis: 'y', 
    update: function (event, ui) { 
     var data = $(this).sortable('serialize'); 

     // POST to server using $.post or $.ajax 
     $.ajax({ 
      data: data, 
      type: 'POST', 
      url: '/your/url/here' 
     }); 
    } 
}); 
這樣做的是它使用元素id創建元素的數組。所以，我平時做這樣的事情：
<ul id="sortable"> 
    <li id="item-1"></li> 
    <li id="item-2"></li> 
    ... 
</ul> 
當您使用序列化選項，它會創建一個POST查詢字符串是這樣的：項目[] = 1個&項目[] = 2等，所以，如果你做在id屬性中使用 - 例如 - 數據庫ID，則可以簡單地遍歷POSTed數組並相應地更新元素的位置。

例如，在PHP：
$i = 0; 

foreach ($_POST['item'] as $value) { 
    // Execute statement: 
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value 
    $i++; 
} 

這種解決方案的問題在於：它不只是每次移動的項目時間更新一次，但也樣了「專賣店」的其他更新並在你所做的那個之前執行它們。所以，舉例來說，如果你移動4個項目，它會更新1 + 2 + 3 + 4次，導致更多的錯誤，並且如果你需要管理很多項目，網頁會慢很多。

我的問題很簡單：爲什麼會發生這種情況？我怎樣才能避免這種情況？

來源

2017-08-28 Shinra tensei

似乎有點不可避免的給你的例子。因爲如果將第4個項目移動到第1個位置，腳本不僅需要更新移動項目的位置（順序），而且還必須移除它之前的所有記錄。如果這是不可接受的，那麼您是否可以在每個元素重新定位之後關閉AJAX請求，而僅在用戶按下提交後才發送表單數據？ –

嗯......你是對的，這似乎是一個很好的方式來處理這個問題。我會嘗試的 –

答案確實很簡單（謝謝Lucas Krupinski）。實際上，所有需要的是添加一個按鈕或類似的東西，並使其處理更新。

讓我們想象我已經添加了一個按鈕onclick="save()"。如果我們把這樣的代碼：

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
}); 

function save(){ 
    var order = $("#sortable").sortable('serialize'); 
    console.log("order: " + order); 
    $.ajax({ 
     data: order, 
     type: 'POST', 
     url: '/your/url/here' 
    }); 
}

我們將看到腳本只與我們現在所擁有的順序執行一次，避免訂單的性能下降和錯誤。

來源

2017-08-28 12:08:56

爲什麼jQuery.sortable的這個ajax執行更新多次？

回答

相關問題