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 写类方式之七
Jul 05 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
原生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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
简单介绍react redux的中间件的使用
2018/04/06 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
小学一年级学生评语大全
2014/12/25 职场文书
公务员年度个人总结
2015/02/12 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
毕业设计致谢词
2015/05/14 职场文书
简爱电影观后感
2015/06/10 职场文书
预备党员表决心的话
2015/09/22 职场文书
React实现动效弹窗组件
2021/06/21 Javascript