Question

我正在使用jquery移动脚本从我的wordpress网站获取json，但它没有显示任何内容并返回：＆＃39; Uncaught TypeError：无法读取属性＆＃39; length＆＃39;未定义的＆＃39;错误。我知道我在解析json的时候弄乱了，但我碰巧是一个javascript noob。对于那些修复并向我解释的人，我感谢你。

HTML：的ListView

    <div data-role="page" id="home">
<div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview" id="post-list" data-theme="a"></ul>
        </div>
    </div>
</div>

网页浏览

<div data-role="page" id="headline">
 <div data-role="content">
        <ul data-role="listview" id="post-data" data-theme="a"></ul>
    </div>
    </div>

JavaScript的：

 $(document).on('pageinit', '#home', function () {

                   $.ajax({
                          url: 'http://chris.floppytron.com/api/get_recent_posts/',
                          dataType: "jsonp",
                          success: function (result) {
                          ajax.parseJSONP(result);
                          },
                          error: function (request, error) {
                          alert('Network error has occurred please try again!');
                          }
                          });
                   });

                   $(document).on('pagebeforeshow', '#headline', function () {
                                  $('#post-data').empty();
                                  $.each(postInfo.result, function (i, row) {
                                         if (row.id == postInfo.id) {
                                         $('#post-data').append('<li>' + row.title + '</li>');
                                         $('#post-data').append('<li>' + row.date + '</li>');
                                         $('#post-data').append('<li>' + row.categories + '</li><br />');
                                         $('#post-data').append('<li>' + row.content + '</li>');
                                         $('#post-data').listview('refresh');
                                         }
                                         });
                                  });

                                  $(document).on('vclick', '#post-list li a', function () {
                                                 postInfo.id = $(this).attr('data-id');
                                                 $.mobile.changePage("#headline", {
                                                                     transition: "slide",
                                                                     changeHash: false
                                                                     });
                                                 });

                                                 var postInfo = {
                                                     id: null,
                                                     result: null
                                                 }

var ajax = {
    parseJSONP: function (result) {
        postInfo.result = result.results;
        $.each(result.results, function (i, row) {
               console.log(JSON.stringify(row));
               $('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
               });
               $('#post-list').listview('refresh');
    }
}

Answer 1

没有“{”没有函数$.parseJSONP $.parseJSON。无论如何，您不需要解析返回的Ajax结果，因为它已准备好填充。

返回的数组没有.results属性，它是.posts。

postInfo.result = result.posts;
$.each(postInfo.result, function (i, row) {

固定代码

$(document).on('pagecreate', '#home', function () {
    $.ajax({
        url: 'http://chris.floppytron.com/api/get_recent_posts/',
        dataType: "jsonp",
        success: function (result) {
            addRows(result);
        },
        error: function (request, error) {
            alert('Network error has occurred please try again!');
        }
    });
});

$(document).on('pagebeforeshow', '#headline', function () {
    $('#post-data').empty();
    $.each(postInfo.result, function (i, row) {
        if (row.id == postInfo.id) {
            $('#post-data').append('<li>' + row.title + '</li>');
            $('#post-data').append('<li>' + row.date + '</li>');
            $('#post-data').append('<li>' + row.categories + '</li><br />');
            $('#post-data').append('<li>' + row.content + '</li>');
            $('#post-data').listview('refresh');
        }
    });
});

$(document).on('click', '#post-list li a', function () {
    postInfo.id = $(this).attr('data-id');
    $.mobile.changePage("#headline", {
        transition: "slide",
        changeHash: false
    });
});

var postInfo = {
    id: null,
    result: null
};

function addRows(result) {
    postInfo.result = result.posts;
    $.each(postInfo.result, function (i, row) {
        $('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
    });
    $('#post-list').listview('refresh');
};

<强> Demo

未捕获的TypeError：无法读取属性＆＃39; length＆＃39;未定义的

1 个答案: