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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
javascript模块化简单解析
Apr 07 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
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
推荐一篇入门级的Class文章
2007/03/19 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python导入库的具体方法
2020/06/18 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
python re.match()用法相关示例
2021/01/27 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
公司保密承诺书
2014/03/27 职场文书
公司晚会策划方案
2014/05/17 职场文书
企业精神口号
2014/06/11 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
超市店庆活动方案
2014/08/31 职场文书
故宫的导游词
2015/01/31 职场文书
中国合伙人观后感
2015/06/02 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
分享几种python 变量合并方法
2022/03/20 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript