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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/12800

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案