通过AJAX显示JSON数组（jQuery的） [英] Displaying JSON array through ajax (jquery)

问题描述

我是pretty的新的Ajax和JSON，并试图得到这个工作，但似乎无法得到它的窍门。

I'm pretty new to Ajax and JSON and tried to get this to work but can't seem to get the hang of it.

如何调用Ajax中的JSON和显示所有的JSON文件中的信息？

How do I call the json in ajax and display all the info inside the json file?

这是我的JSON文件

{ posts: [{"image":"images/bbtv.jpg", "alter":"BioBusiness.TV", "desc":"BioBusiness.TV", "website":"http://andybudd.com/"}, {"image":"images/grow.jpg", "alter":"Grow Staffing", "desc":"Grow Staffing", "website":"http://growstaffing.com/"}]}

和ajax的功能即时通讯使用

and the ajax function im using

$.ajax({
       type: "GET",
       url: "category/all.js",
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {

            $.each(data.posts, function(i,post){
                            $('#folio').html('<ul><li><div class="boxgrid captionfull"><img src="' + post.image + '" alt="' + post.alter + '" /><div class="cover boxcaption"><p>' + post.desc + '</p><a href="' + post.website + '" target="_blank">More Work</a></div></div></li></ul>');

                    });

            initBinding();
       },
       error: function(xhr, status, error) {
         alert(xhr.status);
       }
    });

由于某些原因，它只是显示的最后一个项目......

For some reason, it's only displaying the last item....

任何帮助在正确的方向将是巨大的。

Any help in the right direction would be great.

谢谢！

推荐答案

尝试是这样的：

$('#folio').html("<ul/>");
$.each(data.posts, function(i,post){
   $('#folio ul').append('<li><div class="boxgrid captionfull"><img src="' + post.image + '" alt="' + post.alter + '" /><div class="cover boxcaption"><p>' + post.desc + '</p><a href="' + post.website + '" target="_blank">More Work</a></div></div></li>');
});

这篇关于通过AJAX显示JSON数组（jQuery的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！