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方法。

jQuery异步获取json数据的2种方式的更多相关文章

  1. SparkStreaming获取kafka数据的两种方式:Receiver与Direct

    简介: Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以简单理解成: Receiver方式是通过zookeeper来连接kafka队列, Dire ...

  2. 【代码笔记】iOS-向服务器传JSON数据的两种方式

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  3. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 遍历json数据的几种方式。

    json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...

  5. 遍历json数据的几种方式

    json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...

  6. PHP获取POST数据的三种方式

    一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...

  7. 用JQuery解析获取JSON数据

    JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的.从http://api.flickr.com/services/feeds/photos ...

  8. spring mvc 返回json数据的四种方式

    一.返回ModelAndView,其中包含map集 /* * 返回ModelAndView类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式 ...

  9. SpringMVC返回json数据的三种方式

    1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id="defaultJsonView" cla ...

随机推荐

  1. POJ 2195 Going Home(KM算法模板)

    题目链接:http://poj.org/problem?id=2195 题目大意: 给定一个N*M的地图,地图上有若干个man和house,且man与house的数量一致. man每移动一格需花费$1 ...

  2. Sql Server2005 Transact-SQL 新兵器学习总结之-排名函数

    Transact-SQL提供了4个排名函数: rand() , dense_rand() , row_number() , ntile() 下面是对这4个函数的解释:rank() 返回结果集的分区内每 ...

  3. pip常用命令总结(转载)

    基本的命令解释,如下图: 列出已安装的包 pip freeze or pip list 导出requirements.txt pip freeze > <目录>/requiremen ...

  4. vue-cli中如何集成UEditor 富文本编辑器?

    1.根据后台语言下载对应的editor插件版本 地址:https://ueditor.baidu.com/website/download.html 2.将下载好的资源放在/static/uedito ...

  5. Aspose.Words 自定义文档模版生成操作类

    /// <summary> /// 操作word通用类 LIYOUMING add 2017-12-27 /// </summary> public class DocHelp ...

  6. https页面打不开

    https://blog.csdn.net/leedaning/article/details/71552625

  7. PHP将对象转换成数组的方法(兼容多维数组类型)

    /** * @author gayayang * @date 2012-8-21 * @todo 将对象转换成数组 * @param unknown_type $obj * @return unkno ...

  8. 【LOJ】 #2305. 「NOI2017」游戏

    题解 枚举x所在的地图的颜色,然后2-SAT建边 如果v所在的地图刚好是不能选的,那么u这边只能选另一种颜色 否则就是u的颜色到v的颜色 v的另一种颜色到u的另一种颜色 代码 #include < ...

  9. Numpy的简单用法

    Numpy的简单用法 import numpy as np 一.创建ndarray对象 列表转换成ndarray: >>> a = [1,2,3,4,5] >>> ...

  10. thinphp中auth认证方法使用

    一.获取Auth类1.ThinkPHP3.1.3完整版:http://www.thinkphp.cn/down/338.html2.OneThink1.0正式版:https://github.com/ ...