首页 > 代码库 > jquery请求json数据
jquery请求json数据
本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下:
通常来说,jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本文就来实现使用这2种方式异步获取json数据,然后追加到页面。
在根目录下创建data.json文件:
?
1
2
3
4
|
{ "one" : "Hello" , "two" : "World" } |
一、通过$.getJSON方法获取json数据
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script src=http://www.mamicode.com/ "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数据
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script src=http://www.mamicode.com/ "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数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。