Question

我尝试跟踪表单和列表的值。我使用jQuery。我可以序列化一个表单，但我有问题对列表做同样的事情。有人可以帮助序列化该列表吗？

我在这里有样本来检查和播放：http://jsfiddle.net/rTgL3/

HTML：

<form action="">
<input type="text" name="item-1" value="item1" /><br>
<input type="text" name="item-2" value="item2" /><br>
<input type="text" name="item-3" value="item3" /><br>
</form>
<div id="buttonForm">Serialize form</div>

<br><br>

<ul id="list">
  <li id="item_1">Item1</li>
  <li id="item_2">Item2</li>
  <li id="item_3">Item3</li>
</ul>
<div id="buttonList">Serialize list</div>

JQUERY：

$("#buttonForm").click(function(){
    var dataForm = $("form").serialize();
    alert(dataForm);
});

$("#buttonList").click(function(){
    var dataList = $("list").serialize();
    alert(dataList);
});

Answer 1

jQuerys serialize仅适用于表单元素。你可以在这里阅读：http://api.jquery.com/serialize/。

此外，您的选择器$("list")还不是很正确。 list是标识符，因此选择器应如下所示：$("#list")。

为什么不通过迭代所有项目并将它们附加到字符串来自行序列化列表？就像这个例子（不关心深度）：

$("#buttonList").click(function() {
    // empty string to save the result
    var dataList = "";

    // find all li elements within the element with the id list
    var $entries = $("#list").find('li');

    // iterate through all these items, with i as index and item itself as entry
    $entries.each(function(i, entry) { 

        // append the elements id attribute and its content to the string, like: item_1=Item1 for <li id="item_1">Item1</li>
        dataList += $(entry).attr('id') + '=' + $(entry).text();

        // add & to the string, if the entry is not the last one
        if (i != $entries.length-1) {
            dataList += '&';
        }
   });

   // alert the result string
   alert(dataList);
});

Answer 2

您可以不序列化列表（http://api.jquery.com/serialize）。另外，在提供的jsfiddle中，我得到了以下观察：

使用$('#list')代替$('list')作为selector，因为list是您元素的id。
</ul>结束标记丢失。

试试这个：

现场演示： http://jsfiddle.net/rTgL3/4/

通过将存储在li中的每个元素的#list返回来获取id=text中的所有array元素。

var array = $('#list li').map(onListMap).get();
var qStr = array.join('&'); // queryString needed

onListMap 功能：

function onListMap(idx, el) {
   return el.id + '=' + $(el).text(); // Use '.html()' if needed
};

Answer 3

你需要先创建json对象并使用param序列化它。下面的工作代码

$("#buttonForm").click(function(){
    var dataForm = $("form").serialize();
    alert(dataForm);
});

var myObject = {};
$("#list li").each(function(){
    var t = $(this).attr('id')
   myObject[t]=$(this).html();
});

$("#buttonList").click(function(){
    alert($.param(myObject));
});

更新http://jsfiddle.net/rTgL3/4/

序列化表单和列表

3 个答案: