jquery：AJAX 获取外部json

最新推荐文章于 2021-08-05 16:31:22 发布

KelselYau

最新推荐文章于 2021-08-05 16:31:22 发布

阅读量539

点赞数 1

本文链接：https://blog.csdn.net/sinat_16320223/article/details/78238193

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery：AJAX 获取外部json

最近在学习jquery和ajax，在学习的过程学到了通过ajax获得外部json的方法。
通过查阅资料可知，
$.ajax方法如下：
jQuery.ajax( url [, settings ] )
查看api说明

具体的代码如下：


    ```
$.ajax({

    type:"GET",

    url:url,

    dataType:"json",

    success:function(data){

        var str = "";
        $.each(data,function(idx,obj){
        str += "<li>" + obj.firstName + "</li>"
        })
        $result.html(str);
    }
})

整体的实现过程如下：
外部userlist.json文件，
[
    {
        "firstName": "Brett",
        "lastName": "McLaughlin",
        "email": "brett@newInstance.com"
    }, 
    {
        "firstName": "Jason",
        "lastName": "Hunter",
        "email": "jason@servlets.com"
    }, 
    {
        "firstName": "Elliotte",
        "lastName": "Harold",
        "email": "elharo@macfaq.com"
    },
    {
        "firstName": "Isaac",
        "lastName": "Asimov",
        "genre": "science fiction"
    }, 
    {
        "firstName": "Tad",
        "lastName": "Williams",
        "genre": "fantasy"
    }, 
    {
        "firstName": "Frank",
        "lastName": "Peretti",
        "genre": "christian fiction"
    },
    {
        "firstName": "Eric",
        "lastName": "Clapton",
        "instrument": "guitar"
    }, 
    {
        "firstName": "Sergei",
        "lastName": "Rachmaninoff",
        "instrument": "piano"
    }
]

HTML和JavaScript：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <button>用$.getJSON方法获取JSON文件数据</button>
    <ul id="result"></ul>
    <script>
        $(document).ready(function(){
            var $username = $('#username'),
                $result = $('#result'),
                url = 'userlist.json';
            $('button').on('click', function() {
                //获取json数据并以列表形式显示在result中
                $.ajax({
                    type:"GET",
                    url:url,
                    dataType:"json",

                    success:function(data){
                        console.log(data);
                        var str = "";
                        $.each(data,function(idx,obj){
                            str += "<li>" + obj.firstName + "</li>"
                        })
                        $result.html(str);
                    }
                })
            })
        })
    </script>
</body>
</html>

“`

KelselYau

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery：AJAX 获取外部json

jquery：AJAX 获取外部json最近在学习jquery和ajax，在学习的过程学到了通过ajax获得外部json的方法。通过查阅资料可知， $.ajax方法如下： jQuery.ajax( url [, settings ] ) 查看api说明具体的代码如下： ```$.ajax({ type:"GET", url:url, dataType:"json
复制链接

扫一扫