jQuery异步获取json数据方法汇总


Posted in Javascript onDecember 22, 2014

jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据,然后追加到页面。

在根目录下创建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>

jQuery异步获取json数据方法汇总 

■ 通过$.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方法。

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
jQuery的观察者模式详解
Dec 22 #Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 #Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
javascript动态创建及删除元素的方法
Dec 22 #Javascript
了不起的node.js读书笔记之例程分析
Dec 22 #Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 #Javascript
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
含有CKEditor的表单如何提交
2014/01/09 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
门面房租房协议书
2014/08/20 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
承诺书范本大全
2015/05/04 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书