Question

使用$.ajax，我收到如下JSON响应：

[{"project":{"name":"P1111", description":"I like chicken soup","active":true}} .....repeats several times]

我想用jQuery做的是接受JSON响应，然后循环它以在id=target

上创建以下内容

<ul id="target">
  <li>P1111 - I like chicken soup - active</li>
  <li>3311 - I like green soup - active</li>
  <li>4324234 - I like orange soup - active</li>
  <li>123123 - I like hands - active</li>
</ul>

来自服务器的我的JSON响应：

[{"project":{"name":"3rd project  XXXX","created_at":"2010-09-21T05:00:28Z","updated_at":"2010-09-21T05:00:28Z","site_id":1,"creator":1,"id":3,"description":"I eat chicken","active":true}},{"project":{"name":"It's 10:11pm2","created_at":"2010-09-21T05:11:25Z","updated_at":"2010-09-21T05:22:07Z","site_id":1,"creator":1,"id":7,"description":"It's 10:11pmIt's 10:11pm22","active":true}},{"project":{"name":"My first project","created_at":"2010-09-21T04:15:54Z","updated_at":"2010-09-21T04:15:54Z","site_id":1,"creator":1,"id":1,"description":"Wowwww","active":true}},{"project":{"name":"What a great project","created_at":"2010-09-21T04:16:07Z","updated_at":"2010-09-21T04:58:24Z","site_id":1,"creator":1,"id":2,"description":"Updated Description2","active":true}},{"project":{"name":"the big 6","created_at":"2010-09-21T05:08:22Z","updated_at":"2010-09-21T05:08:22Z","site_id":1,"creator":1,"id":6,"description":"the big 6the big 6","active":true}}]

Answer 1

使用$ .ajax

$.ajax({
 url: url,
 dataType: 'json',
 success: function(data) {
    $.each(data, function(i,item){
      $('#target').add('<li>' + item.project.name + '</li>');
    });
 }

}）;

我建议使用$.getJSON，因为您的代码会更短，从而使您向客户端的传输更小。

这是一个如何做到这一点的粗略想法。有很多方法可以将li附加到列表中。

Answer 2

查看jQuery.each这是一种foreach语句。有了它，你可以迭代你的JSON对象（任何JSON对象实际上只是一个纯JavaScript变量，在你的情况下，它是一个对象数组）。

Answer 3

$.each(data.project, function(i, item) {
     $('#target').append('<li>'+item.name+' - '+item.description+' - '+item.active+'</li>');
});

Answer 4

使用getJSON：

循环遍历每个项目

$.getJSON(url, function(data){
    $.each(data, function(i, item){
        var text = item.project.name + ' - ' 
                 + item.project.description + ' - ' 
                 + (item.project.active ? 'active' : 'inactive');
        $('li').html(text).appendTo($('#target'));
    });
});

Answer 5

试试这个

  $.ajax({
    ...
    success: function(data) {
      var lis = $.map(data, function(elem, i) {
         var project = elem['project'];
         return '<li>' + project['name'] + ' - ' + project['description'] + ' - ' +
                (project['active'] ? 'true' : 'false') + '</li>';
      });
      $('#target').append(lis.join('\n'));
    }
  });

Answer 6

var _li="";
jQuery.ajax({
 url:'ur_url',
 type:'Get', //or post or jsonp as per need
 success:function(data)
   {
    jQuery.each(data,function(i,item){
       _li=_li+"<li>"+item.project.name +"  -  " +item.project.description +"  -  " +item.project.active+"</li>";
                                   });
   jQuery('#target').html(_li);
   } 
})

Answer 7

尝试：

var json = [ {"project":{"name":"P1111", "description":"I like chicken soup","active":true}},
                {"project":{"name":"P2222", "description":"I like chicken soup","active":true}} ];
var html = ['<ul id="target">'];
$.each( json, function(i, p) {
        var a = p.project.active ? "active" : "not active";
        html.push("<li>" + p.project.name + " - " + p.project.description + " - " + a + "</li>");
});
$("body").append(html.join(""));

Answer 8

我这样做是为了填充一个选择（id'时间表'），这几乎和你一样。

$。getJSON（“../ schedule /”+ id，function（data）{ $ .each（data，function（index，value）{ $（“”）。attr（“value”，value.id）.html（value.name）.appendTo（“＃schedule”）; }）; }）;

Answer 9

我总是喜欢直接使用Javascript并将其发送到html文档：

document.writeln("<ul id='target'>");
for (project in projects ) {
  var active = (project.active) ? "active" : "NOT active";
  document.writeln('<li>'+project.name+' - '+
                          project.description+' - '+active+'</li>');
}
document.writeln("</ul>");

或者将它全部放在字符串var中，然后将其写入div：

var htmlStr = "<ul id='target'>";
for (project in projects) {
  var active = (project.active) ? "active" : "NOT active";
  htmlStr += "<li>"+project.name+" - "+project.description+" - "+active+"</li>";
}
htmlStr += "</ul>";
document.getElementById("divTarget").html = htmlStr;

我的应用程序正在向我发送JSON。如何获取JSON并将HTML注入页面？

9 个答案: