jQuery - 如何將HTML列表（ul，ol）發佈到另一個頁面，就好像它是一個表單一樣？

Question

我製作了一個可以使用jQuery UI和jeditable拖拽元素的可編輯列表。 現在我想'發佈'列表的內容並保存它。 如何「序列化」列表的內容？

舉例來說，如果我有名單：

<ol id="topics"> 
    <li><span class="editable">random topic</span></li> 
    <li><span class="editable">another topic</span></li> 
    <li><span class="editable">third topic</span></li> 
</ol> 

我如何將其轉換爲字符串：

?topics1=random topic&topic2=... 

我希望這是有道理的。 我的目標是通過使用信息保存列表順序和內容。 謝謝

Answer 1

var data = $('#topics .editable').map(function() { 
    return $(this).text(); 
}).get(); 

然後在AJAX調用中簡單地使用這個數組或者序列化它作爲JSON並將其存儲在表單字段中。

既然你想要一個查詢字符串，看看由$.param({topics: data})生成的格式。這將導致包含數組的PHP風格的查詢字符串：topics[]=abc&topics[]=def

既然你提到你打算使用$.post：

$.post('url', { topics: data }, function() { /* ... */ }); 

然後，假設你在服務器端使用PHP，你有數組$_POST['topics']

---

如果你真的想topic1等，使用此：

var data = {}; 
$('#topics .editable').each(function(i) { 
    data['topic' + (i + 1)] = $(this).text(); 
}); 

$.post('url', data);