Question

如果我有以下列表：

<ul class="nameList">
    <li value="1">Bob</li>
    <li value="2">Frank</li>
    <li value="3">Sally</li>
</ul>

如何将其转换为json对象，如下所示：

[{ “ID”： “1”， “标题”： “鲍勃”}， { “ID”： “2”， “标题”： “弗兰克”}， { “ID”： “3”， “标题”： “弗兰克”}]

我需要将这些数据转换为该格式，然后我可以通过$ .post（）调用将其传递回我的php服务器。

有人可以告诉我如何从该列表中获取项目并使用jQuery将它们转换为上面的json吗？

Answer 1

jQuery实际上有内置的东西来构建数组：map()

var items = $('.nameList').find('li').map(function() {
  var item = { };

  item.id = this.value;
  item.title = $(this).text();

  return item;
});

这将构建一个与您所追求的JSON结构匹配的对象数组。然后，对于JSON序列化，使用JSON.stringify，它包含在json2.js中，内置于较新的浏览器中并可用于较旧的浏览器：

// Produces [{'id':1,'title':'bob'},{etc},{etc}]
var json = JSON.stringify(items);

另请注意，$ .post（）会自动序列化对象数据参数，因为key1 = value1＆amp; key2 = value2＆amp; etc.除非您在服务器端严格需要JSON，否则可能不需要JSON序列化步骤。

Answer 2

var items = [];

$('ul.nameList').children().each(function() {
  var $this = $(this);
  var item = { id: $this.attr('value'), title: $this.html() };
  items.push(item);
});

Answer 3

你可以简单地将它们推送到 JSON对象，以下是如何 -

   // create a blank array
    var mylist = [];

    // loop trough the li
    $("ul.nameList > li").each(function () {    
    //push element data to the array
        mylist.push({
            "id": $(this).attr("value"),
            "title": $(this).text()
        });
    })

    // then you can simply pass it to the post method 
    $.post("myhandler.php", { list: mylist }, function (data) {
        // recived data
   })

当然还有你的 html

<ul class="nameList">
    <li value="1">Bob</li>
    <li value="2">Frank</li>
    <li value="3">Sally</li>
</ul>

工作示例 - http://jsfiddle.net/mohammadwali/tkhb5/

希望这有帮助！

如何使用jquery将LI的项转换为json对象？

3 个答案: