jquery - 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=...

我希望这是有道理的。我的目标是使用 post 保存列表顺序和内容。谢谢

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);