jquery：AJAX 获取外部json

来源：互联网发布：营口港大数据平台编辑：程序博客网时间：2024/06/06 06:36

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>

“`

阅读全文

0 0