脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现异步获取json数据的2种方式

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

 更新时间：2014年08月29日 11:17:11   投稿：shichen2014  
这篇文章主要介绍了jQuery实现异步获取json数据的2种方式,主要讲述了$.getJSON方法与$.ajax方法,非常实用,需要的朋友可以参考下

本文实例讲述了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>

 

二、通过$.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方法。

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：

http://tools.jb51.net/code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

您可能感兴趣的文章:

相关文章

  • 浅析bootstrap原理及优缺点

    浅析bootstrap原理及优缺点

    网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统
    2017-03-03
  • jquery下checked取值问题的解决方法

    jquery下checked取值问题的解决方法

    修改checkbox时..jquery在取checked值时总是出这样那样的问题....各个版本之间还有少许的差异....当向后台发送数据后,,再返回到当前页时..checked的状态始终不对
    2012-08-08
  • jQuery在页面加载时动态修改图片尺寸的方法

    jQuery在页面加载时动态修改图片尺寸的方法

    这篇文章主要介绍了jQuery在页面加载时动态修改图片尺寸的方法,实例分析了jQuery操作图片的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 基于jQuery实现响应式圆形图片轮播特效

    基于jQuery实现响应式圆形图片轮播特效

    这篇文章主要介绍了基于jQuery实现响应式圆形图片轮播特效，mislider插件可以将图片以圆形图片显示，然后使图片无限循环形成轮播图或旋转木马特效，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery的$().each和$.each的区别

    jquery的$().each和$.each的区别

    今天小编就为大家分享一篇关于jquery的$().each和$.each的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • jQuery监听浏览器窗口大小的变化实例

    jQuery监听浏览器窗口大小的变化实例

    下面小编就为大家带来一篇jQuery监听浏览器窗口大小的变化实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jquery实现动态改变div宽度和高度

    jquery实现动态改变div宽度和高度

    这篇文章主要介绍了jquery实现动态改变div宽度和高度，效果非常不错，而且兼容性也很好，有需要的小伙伴可以参考下。
    2015-05-05
  • jQuery模拟select实现下拉菜单功能

    jQuery模拟select实现下拉菜单功能

    这篇文章主要介绍了jQuery模拟select实现下拉菜单功能,比较实用,需要的朋友可以参考下。
    2016-06-06
  • jQuery、zepto、js常用小技巧

    jQuery、zepto、js常用小技巧

    本文给大家分享的是小编jQuery、zepto、js常用小技巧的心得，非常实用，有需要的小伙伴可以参考下
    2017-02-02
  • jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    这篇文章主要介绍了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法,涉及jQuery插件EasyUI相关属性设置技巧,需要的朋友可以参考下
    2016-08-08

最新评论