个人中心
gpt4 book ai didi

jQuery异步获取json数据方法汇总

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery异步获取json数据方法汇总由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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数据方法汇总

■ 通过$.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数据方法汇总的文章就讲到这里了,如果你想了解更多关于jQuery异步获取json数据方法汇总的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： vue-video-player实现实时视频播放方式(监控设备-rtmp流)
文章推荐： 构建Maven多模块项目的方法
文章推荐： 解决vue+webpack项目接口跨域出现的问题
文章推荐： jQuery的观察者模式详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com