JSON数据未加载到内容页面中

时间:2013-10-21 21:35:42

标签: javascript jquery ajax json

我正在尝试将我的JSON数据附加到内容页面中,但未加载数据。当我使用console.log时,我可以看到数据出现。

JS:

$(document).on('pagebeforeshow', '#blogposts', function() {     
//$.mobile.showPageLoadingMsg();    
  $.ajax({
  url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
     dataType: "json",
     jsonpCallback: 'successCallback',
     async: true,
     beforeSend: function() { $.mobile.showPageLoadingMsg(true); },
     complete: function() { $.mobile.hidePageLoadingMsg(); },
     success:function(data){
        $.each(data.posts, function(i, val) {
    console.log(val.title);
    $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo('#postList');
    return (i !== 4);
        console.log('#postlist');
        });
      },
     error: function(data) {
        alert("Data not found");
    }
   });
});

HTML:

<!-- Page: Blog Posts -->
    <div id="blogposts" data-role="page">
        <div data-role="header" data-position="fixed">
            <h2>My Blog Posts</h2>
        </div><!-- header -->
        <div data-role="content">
            <ul id="postlist"> </ul><!-- content -->
        </div>
        <div class="load-more">Load More Posts...</div> 
    </div><!-- page -->

2 个答案:

答案 0 :(得分:1)

我稍微更改了代码,因此它适用于JS Fiddle。

这是一个小提琴: http://jsfiddle.net/rM7zh/

$(document).ready(function() {         
  $.ajax({
  url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
     dataType: "jsonp",
     async: true,
     success:function(data){
        $.each(data.posts.slice(0,4), function(i, val) {
    console.log(val.title);
    $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo($('#postlist'));
        });
      },
     error: function(data) {
        alert("Data not found");
    }
   });
});

答案 1 :(得分:0)

我认为你应该纠正.appendTo(&#39;#postList&#39;); =&GT; .appendTo(&#39;#postlist&#39);应该没问题,jquery选择器是区分大小写的