jQuery+ajax解析json数据渲染

王小婷

发布于 2019-05-15 10:39:33

2.5K0

发布于 2019-05-15 10:39:33

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>
        $.ajax({
            url: "test.json", //json文件位置
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                //each循环 使用$.each方法遍历返回的数据date
                $.each(data.first, function(i, item) {
                    var str = '<div>姓名:' + item.name + '昵称：' + item.nick + '</div>';
                    document.write(str);
                })
            }
        })
    </script>
</html>

test.json

{
    "first": [
        {
            "name": "王小婷",
            "nick": "祈澈菇凉"
        }, {
            "name": "安安",
            "nick": "坏兔子"
        }, {
            "name": "编程微刊",
            "nick": "简书"
        }
    ]
}