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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
使用php清除bom示例
2014/03/03 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP答题类应用接口实例
2015/02/09 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
农村婚礼主持词
2014/03/13 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
员工2014年度工作总结
2014/12/09 职场文书
介绍信的写法
2015/01/31 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
如何写通讯稿
2015/07/22 职场文书