使用HTML5sortable爲AJAX序列化數據

我對jQuery，HTML5 Sortable http://farhadi.ir/projects/html5sortable/使用了一個整齊的排序插件，但還沒有找到序列化數據發送爲AJAX POST請求（更新DB）的理想方法。使用HTML5sortable爲AJAX序列化數據

HTML

<ul class="sortable"> 
    <li data-id="1">One</li> 
    <li data-id="2">Two</li> 
    <li data-id="3">Three</li> 
    <li data-id="4">Four</li> 
    <li data-id="5">Five</li> 
</ul>

jQuery的

$('ul.sortable').sortable().bind('sortupdate', function() 
{ 
    var data = ??; // serialize all data-id's ... this is my problem 

    $.post('/sortupdate.php',data,function(){ // PHP script sets new order in DB 
     alert('updated'); 
    }); 
});

所以，我希望發生的是，當我拖動LI項目到新的位置，則sortupdate事件應該觸發功能和發送新data-id屬性值的順序。我目前的想法是循環LI，並將屬性值添加到數組中。有沒有更聰明的做法，或者，做循環最有效的方法是什麼？（我主要是你認識的後端人）。謝謝！

來源

2012-11-27 jtheman

由於插件沒有內置序列化方法，所以您必須手動完成。

var dataIDList = $('ul.sortable li').map(function(){ 
    return $(this).data("id"); 
}).get().join(",");

（這基本上是你在最後描述了，它遍歷並創建一個列表。）

現在，你可以發佈它作爲一個清單：

$.post(url,{ idlist: dataIDList }, completeandler);

你也可以將其作爲陣列發佈，只需刪除.join(",");

來源

2012-11-27 19:36:15

這看起來不錯！然而，jQuery數據（）對我來說是新的，我以爲我會用'return $（this）.attr（「data-id」）' - data（）更好？ – jtheman

這取決於情況。 .data會嘗試猜測值的類型應該是什麼，例如，1將被解析爲一個整數，{foo：「bar」}將被解析爲一個對象，等等。在你的情況下，你不會真的很在乎它是一個int還是一個字符串，所以使用你喜歡的任何一個。如果性能成爲問題，.attr（）應該更快。 –

感謝您的解釋！我測試過了，你解決了我的問題！ :) – jtheman

使用HTML5sortable爲AJAX序列化數據

回答

相關問題