jQuery异步获取json数据的2种方式
2014-08-21 11:13
260 查看
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据,然后追加到页面。
在根目录下创建data.json文件:
■ 通过$.getJSON方法获取json数据
■ 通过$.ajax方法获取json数据
总结:使用$.getJSON方法和$.ajax方法都能达到相同的效果,但是,如果想对异步获取的过程有更细节的控制,推荐使用$.ajax方法。
在根目录下创建data.json文件:
{
"one" : "Hello",
"two" : "World"
}
■ 通过$.getJSON方法获取json数据
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('data.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'list',
html: items.join('')
}).appendTo('body');
});
});
</script>
■ 通过$.ajax方法获取json数据
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'list',
html: items.join('')
}).appendTo('body');
},
statusCode: {
404: function() {
alert("没有找到相关文件~~");
}
}
});
});
</script>
总结:使用$.getJSON方法和$.ajax方法都能达到相同的效果,但是,如果想对异步获取的过程有更细节的控制,推荐使用$.ajax方法。
相关文章推荐
- jQuery实现异步获取json数据的2种方式
- jQuery实现异步获取json数据的2种方式
- Ajax-jquery获取json数据的三种方式
- jQuery异步获取json数据方法汇总
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jQuery异步获取json数据方法汇总
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jquery通过ajax方式获取json数据和解析
- jQuery中对异步提交JSON和XML数据的处理方式
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jquery通过ajax方式获取json数据和解析
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jquery用jsonp方式跨域获取json数据原理(解决jquery跨服务器权限受限问题)
- jquery通过ajax方式获取json数据和解析
- 关于jQuery获取Action返回的JSON数据 项目真实案例 记录(Struts2)
- Ajax中JSON数据的创建与获取【JQuery】
- .Net MVC3 中前台异步获取json数据的实例
- JQuery以POST方法从ASP.NET服务器获取Json数据完整示例
- .Net MVC3之1:前台异步获取json数据的实例(1)
- Android之从网络中获取数据并返回客户端的两种方式:XML格式返回与Json格式返回