我无法显示$.getJSON
来电的内容。我有这个代码从页面中检索一些JSON数据。
var loadItems = function() {
if (hasNextPage === false) {
return false
}
pageNum = pageNum + 1;
var url = baseUrl + "json/" + pageNum + '/';
var jqxhr = $.getJSON(url, function (data) {
var a = [];
$.each(data.itemList, function (item) {
a.push("<li>" + item.title + "</li>");
});
$("<ul/>", {html: a.join(" ")}).appendTo("#anchor");
});
jqxhr.complete(function () { alert('done!'); $(window).bind('scroll', loadOnScroll); });
};
这个想法只是根据滚动位置动态加载页面,并获取该页面的JSON内容(用于无限滚动效果)。 JSON结构是这样的:
{ "key1": val1, "key2": val2, "itemList": [ {"title": "title", "author": "author", "id": 100, "slug": slug, }, ... ] }
重要的值在itemList中,我必须检索将插入我的django模板的数据,而django模板又会从视图中获取一些数据。除了我无法访问itemList中的数据外,一切似乎都运行得很好。似乎没有任何东西被推入阵列。因为页面上没有显示任何内容(即应创建的<li>
)。这似乎是一个基本的ajax移动的简单实现,但它不起作用。
编辑:
我已经完成了一些错误跟踪,并发现代码永远不会执行$ .each循环。不知道如何解决这个问题。
答案 0 :(得分:1)
您应该使用错误日志来检查出现了什么问题:并始终使用$.each
中的index,obj格式来保证安全。
$.getJSON(url).success( function( data ) {
console.log(data);
$.each(data.itemList, function (index, item) {
a.push("<li>" + item.title + "</li>");
});
$("<ul/>", {html: a.join(" ")}).appendTo("#anchor");
}).error(function(error){
console.log(error);// see if you are getting in error log..
});
并且您的json数据也是错误的应该是这样的:
{ "key1": "val1",
"key2": "val2",
"itemList":
[
{
"title": "title", "author": "author", "id": 100, "slug": "slug"
},.......
]
}
尝试使用更正后的数据。 您可以在此处查看您的数据:http://json.parser.online.fr/
答案 1 :(得分:0)
我在使用
时看到了代码中的问题 $.each() //It should using for dictionary.
所以我有两个解决方案
1)您可以使用forEach方法。
前:
`if(data != null && data.itemList.length > 0)
{
data.itemList.forEach(function (item) {
a.push("<li>" + item.title + "</li>");
});
}`
==&GT;这种方式适用于IE 10+和其他浏览器。
2)使用$ .each方法
前:
if(data != null && data.itemList.length > 0)
{
$.each(data.itemList, function (key, item) {
a.push("<li>" + item.title + "</li>");
});
}
==&GT;您的Json数据是字典类型,因此如果您使用$ .each,则需要使用
定义两个变量key: is the key of data.
item: is the value of data.
注意:这种方式适用于所有浏览器版本。
希望这可以帮助你。
答案 2 :(得分:0)
这是因为你的&#39;项目&#39;是一个索引,而不是一个&#39;对象&#39;如你所愿。你必须使用第二个参数:
$.each(data.itemList, function (index, item) {
a.push("<li>" + item.title + "</li>");
});
另外,hasNextPage
定义在哪里?它被定义了吗?你也可以将其缩短为:
if (!hasNextPage) return;