Javascript JSON数据未加载到内容页

我试图将JSON数据附加到内容页中，但数据没有加载。当我使用console.log时，我可以看到数据出现

JS:

$（document）.on（'pagebeforeshow'，'#blogposts'，function（）{
//$.mobile.showPageLoadingMsg（）；
$.ajax({
url:“http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
数据类型：“json”，
jsonpCallback:“successCallback”，
async:true，
beforeSend:function（）{$.mobile.showPageLoadingMsg（true）；}，
完成：函数（）{$.mobile.hidePageLoadingMsg（）；}，
成功：功能（数据）{
$.each（data.posts，function（i，val）{
控制台日志（val.title）；
$（“
”）.append（[$（“”，{html:val.title}），$（“”，{html:val.extract}）]）.wrapInner（“”）.appendTo（'#postList'）；
返回值（i！==4）；
console.log（“#postlist”）；
});
},
错误：函数（数据）{
警报（“未找到数据”）；
}
});
});

HTML:

我的博客帖子

加载更多帖子。。。

我对代码做了一些修改，使其可以在JS Fiddle上工作

这是一把小提琴：

$（文档）.ready（函数（）{
$.ajax({
url:“http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
数据类型：“jsonp”，
async:true，
成功：功能（数据）{
$.each（data.posts.slice（0,4），函数（i，val）{
控制台日志（val.title）；
$（“
”）.append（[$（“”，{html:val.title}），$（“”，{html:val.extract}）]）.wrapInner（“”）.appendTo（$（'#postlist'）；
});
},
错误：函数（数据）{
警报（“未找到数据”）；
}
});
});

我想你应该更正。appendTo（“#postList”）；=>。附件（“#postlist”）；而且jquery选择器应该是区分大小写的

$(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");
    }
   });
});

<!-- 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 -->

$(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");
    }
   });
});