我正在尝试将我的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 -->
答案 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选择器是区分大小写的