jQuery实现异步获取json数据的2种方式


Posted in Javascript onAugust 29, 2014

本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下:

通常来说,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数据的2种方式 

二、通过$.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 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 #Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
You might like
PHP实现单例模式最安全的做法
2014/06/13 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
详解Anaconda 的安装教程
2020/09/23 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
管理心得体会
2013/12/28 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
《童趣》教学反思
2014/02/19 职场文书
小学一年级学生评语
2014/04/22 职场文书
团队精神口号
2014/06/06 职场文书
代理人委托书
2014/09/16 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
python如何查找列表中元素的位置
2022/05/30 Python