序列化表單和列表

我試圖跟蹤表單和列表的值。我使用jQuery。我可以序列化一個表單，但是我有問題要和列表一樣。有人可以幫助序列化該列表嗎？序列化表單和列表

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

來源

2014-07-12 Nrc

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

來源

2014-07-12 14:30:21 dersvenhesse

它的工作原理，但我不明白的代碼。我只是在學習，對我來說太複雜了。我會盡力找到每個部分的信息 – Nrc

@Nrc我添加了一些註釋來解釋每一行。希望這會幫助你。 – dersvenhesse

您可以不連載列表（http://api.jquery.com/serialize）。此外，在提供jsfiddle，我得到了以下觀察：

使用$('#list')而不是$('list')爲您selector因爲list是你的元素的id。
</ul>結束標記丟失。

試試這個：

現場演示：http://jsfiddle.net/rTgL3/4/

通過返回存儲到array每個元素的id=text獲取內部#list所有li元素。

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

來源

2014-07-12 15:14:50

您需要首先創建JSON對象，並使用參數去序列化。下面的工作

$("#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/

來源

2014-07-12 15:59:51

我已經使用id作爲key和html作爲值，您可以根據您的要求更改它。 –

序列化表單和列表

回答

相關問題