jQuery+ajax解析json数据渲染

简介: 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": "简书"
        }
    ]
}
相关文章
|
1天前
|
JSON 数据格式
|
2天前
|
SQL JSON Apache
Flink问题之嵌套 json 中string 数组的解析异常如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
196 1
|
2天前
|
SQL JSON Apache
Flink SQL问题之复杂JSON解析如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
211 0
|
5天前
|
JSON fastjson 数据格式
几种Json工具包的解析速度对比
几种Json工具包的解析速度对比
|
6天前
|
数据采集 XML 数据处理
Python爬虫实战:利用BeautifulSoup解析网页数据
本文将介绍如何利用Python中的BeautifulSoup库来解析网页数据,帮助读者更好地开发爬虫程序,实现自动化数据采集与处理。
|
23天前
|
XML API 开发者
阿里巴巴商品详情数据接口调用和解析python
阿里巴巴商品详情数据接口调用和解析python
18 0
|
23天前
|
存储 监控 NoSQL
Redis 大键问题解析:如何管理和优化巨型数据【redis拓展】
Redis 大键问题解析:如何管理和优化巨型数据【redis拓展】
30 0
|
23天前
|
存储 缓存 JavaScript
|
3月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
30 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
36 0

热门文章

最新文章

推荐镜像

更多