Jquery 序列化窗体和列表

Jquery 序列化窗体和列表,jquery,Jquery,我试图跟踪表单和列表的值。我使用jQuery。我可以序列化一个表单,但在列表中也有同样的问题。有人能帮我把这个列表序列化吗 我这里有样本要检查和播放: HTML: jQuerysserialize仅用于表单元素。正如您在这里看到的: 此外,您的选择器$(“列表”)也不太正确list是一个标识符,因此选择器应该如下所示:$(“#list”) 为什么不自己通过遍历所有项并将它们附加到字符串中来序列化列表呢?就像这个例子(不考虑深度): $(“#按钮列表”)。单击(函数(){ //空字符串以保存结果

我试图跟踪表单和列表的值。我使用jQuery。我可以序列化一个表单,但在列表中也有同样的问题。有人能帮我把这个列表序列化吗

我这里有样本要检查和播放:

HTML:


jQuerys
serialize
仅用于表单元素。正如您在这里看到的:

此外,您的选择器
$(“列表”)
也不太正确
list
是一个标识符,因此选择器应该如下所示:
$(“#list”)

为什么不自己通过遍历所有项并将它们附加到字符串中来序列化列表呢?就像这个例子(不考虑深度):

$(“#按钮列表”)。单击(函数(){
//空字符串以保存结果
var dataList=“”;
//使用id列表查找元素中的所有li元素
var$entries=$(“#list”).find('li');
//迭代所有这些项,以i作为索引,项本身作为条目
$entries.每个(函数(i,条目){
//将elements id属性及其内容附加到字符串中,如:item_1=Item1 for
  • Item1
  • dataList+=$(entry.attr('id')+'='+$(entry.text(); //如果条目不是最后一个条目,则向字符串添加(&D) 如果(i!=$entries.length-1){ 数据列表+='&'; } }); //警告结果字符串 警报(数据列表); });
    您可以序列化列表()。另外,在提供的
    jsfiddle
    中,我得到了以下观察结果:

    • 使用
      $('#list')
      而不是
      $('list')
      作为
      选择器,因为
      list
      是元素的
      id

    缺少结束标记


    试试这个:

    现场演示:


    通过返回存储在
    数组中的每个元素的
    id=text
    ,获取
    列表中的所有
    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
    };
    

    您需要首先创建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));
    });
    

    更新

    它可以工作,但我不理解它。我只是在学习,这对我来说太复杂了。我会尽量找到每个人的信息part@Nrc我添加了一些注释来解释每一行。希望这会对你有所帮助。我已经使用id作为键,html作为值,你可以根据你的要求更改它。
    var array = $('#list li').map(onListMap).get();
    var qStr = array.join('&'); // queryString needed
    
    function onListMap(idx, el) {
       return el.id + '=' + $(el).text(); // Use '.html()' if needed
    };
    
    $("#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));
    });