加载使用JSON数据的jQuery AJAX [英] Load JSON Data Using jQuery AJAX
问题描述
我需要打印该信息点击一个按钮，如果按日期排序时，到目前为止，我有这样的：我有一个看起来像这样的JSON文件，但我一直没能到页面，还是天堂上打印T得按日期一部分的排序。我不知道这个问题是链接到我使用或有什么问题的AJAX版本，因为我看到了，看起来就像这样在YouTube上的一个例子，它工作得很好。
JSON：
[
{
用户：
{
名：USER1
背书：有些评论，
日期：2012年8月11日
}，
{
名：用户2，
背书：一些注释2，
日期：11年9月27日
}，
{
名：用户3，
背书：有些comment3
}，
{
名：USER4
背书：有些comment4
日期：13年4月2日
}，
{
名：USER5
背书：有些comment5
}，
{
名：user6
背书：有些comment6
日期：13年3月17日
}，
{
名：user7
背书：有些comment7
日期：13年5月22日
}，
{
名：user8
背书：有些comment8
日期：13年9月27日
}
]
}
]
HTML更新：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1.0＆GT;
＆LT;冠军＆GT;联系与LT; /标题＆GT;
＆LT;链接REL =快捷方式图标的href =stridesFavicon.ico＆GT;
＆LT;链接相对=样式表的href =CSS / bootstrap.css＆GT;
＆LT;链接相对=样式表的href =CSS /引导-responsive.css＆GT;
＆LT;链接REL =快捷方式图标的href =HTTP：//sites.google.com/site/lowcoupling/favicon_16x16.ico/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;！ - 正文内容 - ＆GT;
＆LT; DIV ID ='Div1构成'＆GT;
＆LT; A HREF =＃ID =clickme＆GT;获取JSON数据＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =myscript.js类型=文/ JavaScript的/＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'下拉菜单，切换）下拉列表（）。
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
JS更新：
$（＃clickme）。点击（函数（）{
$。的getJSON（users.json功能（数据）{
变种项= [];
$每个（数据，功能（键，dvalue）{
$每个（dvalue，功能（键，值）{
items.push（'＆LT;李ID =+按键+'＆GT;+价值+'＆LT; /李＆GT;'）;
}）;
}）;
$（'＆LT; UL /＆GT;'，{
类：兴趣列表，
的HTML：items.join（''）
}）appendTo（身体）。
}）;
}）;
但不工作。意思是不加载的用户名;相反，它是印刷这样的事情我每次点击的链接：
•[对象对象]，[对象的对象]，[对象的对象]，[对象的对象]，[对象的对象]，[对象的对象]，[对象的对象]，[对象的对象]
杰森缺少一些逗号，每一行的JSON内应该结束与一个逗号，除非它是最后一个孩子在范围内，这使得它：
[
{
用户：
{
名：USER1
背书：有些评论，
日期：2012年8月11日
}，
{
名：用户2，
背书：一些注释2，
日期：11年9月27日
}，
{
名：用户3，
背书：有些comment3
}，
{
名：USER4
背书：有些comment4
日期：13年4月2日
}，
{
名：USER5
背书：有些comment5
}，
{
名：user6
背书：有些comment6
日期：13年3月17日
}，
{
名：user7
背书：有些comment7
日期：13年5月22日
}，
{
名：user8
背书：有些comment8
日期：9/27/3
}
]
}
]
I need to print this information when clicking a button and sorting if by date, so far i have this: I have json file that looks like this, but I haven't been able to print it on the page and still haven't got to the sorting by date part. I am not sure if the problem is the link to the ajax version i am using or what is the problem, because i saw an example that looks just like this on youtube and it works just fine.
JSON:
[
{
"users": [
{
"name": "user1",
"Endorsement": "some comment",
"date": "8/11/2012"
},
{
"name": "user2",
"Endorsement": "some comment2",
"date": "9/27/11"
},
{
"name": "user3",
"Endorsement": "some comment3"
},
{
"name": "user4",
"Endorsement": "some comment4",
"date": "4/2/13"
},
{
"name": "user5",
"Endorsement": "some comment5"
},
{
"name": "user6",
"Endorsement": "some comment6",
"date": "3/17/13"
},
{
"name": "user7",
"Endorsement": "some comment7",
"date": "5/22/13"
},
{
"name": "user8",
"Endorsement": "some comment8",
"date": "9/27/13"
}
]
}
]
HTML updated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="shortcut icon" href="stridesFavicon.ico">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="shortcut icon" href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico' />
</head>
<body>
<!--Body content-->
<div id='Div1'>
<a href="#" id="clickme">Get JSON Data</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="myscript.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
JS updated:
$("#clickme").click(function () {
$.getJSON("users.json", function (data) {
var items = [];
$.each(data, function (key, dvalue) {
$.each(dvalue, function (key, value) {
items.push('<li id="' + key + '">' + value + '</li>');
});
});
$('<ul/>', {
'class': 'interest-list',
html: items.join('')
}).appendTo('body');
});
});
But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:
•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
the jason is missing some commas, every line inside the json should end with a comma unless it is the last child in the scope, which makes it:
[
{
"users": [
{
"name": "user1",
"Endorsement": "some comment",
"date": "8/11/2012"
},
{
"name": "user2",
"Endorsement": "some comment2",
"date": "9/27/11"
},
{
"name": "user3",
"Endorsement": "some comment3"
},
{
"name": "user4",
"Endorsement": "some comment4",
"date": "4/2/13"
},
{
"name": "user5",
"Endorsement": "some comment5"
},
{
"name": "user6",
"Endorsement": "some comment6",
"date": "3/17/13"
},
{
"name": "user7",
"Endorsement": "some comment7",
"date": "5/22/13"
},
{
"name": "user8",
"Endorsement": "some comment8",
"date": "9/27/3"
}
]
}
]
这篇关于加载使用JSON数据的jQuery AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
