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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
vue的$http的get请求要加上params操作
Nov 12 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中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP 验证登陆类分享
2015/03/13 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
jQuery的one()方法用法实例
2015/01/19 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
社区义诊活动总结
2014/04/30 职场文书
黄石寨导游词
2015/02/05 职场文书
演讲开场白和结束语
2015/05/29 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL