Question

您好，我似乎已经陷入了JSON传递的数据。当我控制日志以查看传递的数据时，会反复传递该对象，这会影响我的追加输出。

$.ajax({
            url: "http://howtodeployit.com/api/get_recent_posts",
            dataType: "json",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() { $.mobile.showPageLoadingMsg(true); },
            complete: function() { $.mobile.hidePageLoadingMsg(); },
            success:function (data){
                $.each(data.posts, function(key, val) {
                console.log(data.posts);

                var result = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');

                $('#postlist').empty().append(result);
            });

如下所示，这出现了多次，但预期的输出应该只是一行对象。 enter image description here

Answer 1

$.each(data.posts, function(key, val) {

这是一个循环。因此，假设data.posts是一个包含多个对象的数组，您会看到这个帖子多次发布。

你希望看到什么？

另外，loxxy是对的，你错过了一个右大括号，因此很难知道你的循环函数实际结束的位置。

Answer 2

如果您尝试加载jsonp，则dataType应为 jsonp

此外，我认为你正在尝试遍历每个帖子。但是每次清空容器只会有一个结果。

所以而不是：

$('#postlist').empty().append(result);

使用

$('#postlist').append(result);

你错过了一个闭合的牙箍吗？

$.ajax({
    url: "http://howtodeployit.com/api/get_recent_posts",
    dataType: "jsonp",
    jsonpCallback: 'successCallback',
    async: true,
    beforeSend: function () {
        // $.mobile.showPageLoadingMsg(true);
    },
    complete: function () {
        //  $.mobile.hidePageLoadingMsg();
    },
    success: function (data) {
        $.each(data.posts, function (key, val) {
            console.log(data.posts);

            var result = $('<li/>').append([$("<h3>", {
                html: val.title
            }), $("<p>", {
                html: val.excerpt
            })]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');

            $('#postlist').append(result);

        });
    }
});

这是一个DEMO。

JSON对象多次循环

2 个答案: