关于jQuery+ajax解析json数据渲染

无法被打垮的人

于 2020-03-21 17:25:55 发布

阅读量232

点赞数

原文链接：https://blog.youkuaiyun.com/qq_36538012/article/details/89878107

版权

本文介绍如何使用jQuery的AJAX功能从JSON文件中获取数据，并将其以表格形式展示在网页上。通过$.ajax()方法，设置URL、请求类型及数据类型，再利用$.each遍历返回的JSON数组，最终实现动态数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery之从ajax获取json数据以表格的形式显示在页面上

<!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": "简书"
        }
    ]
}