jQuery+ajax解析json数据渲染

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 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月前
|
SQL 存储 JSON
SQL,解析 json
SQL,解析 json
67 8
|
2月前
|
JSON API 数据格式
requests库中json参数与data参数使用方法的深入解析
选择 `data`或 `json`取决于你的具体需求,以及服务器端期望接收的数据格式。
218 2
|
1月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
|
1月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
|
1月前
|
JSON JavaScript API
商品详情数据接口解析返回的JSON数据(API接口整套流程)
商品详情数据接口解析返回的JSON数据是API接口使用中的一个重要环节,它涉及从发送请求到接收并处理响应的整个流程。以下是一个完整的API接口使用流程,包括如何解析返回的JSON数据:
|
5天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
16 2
|
1月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
67 0
|
1月前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
52 0
|
1月前
|
存储 Java C++
Collection-PriorityQueue源码解析
Collection-PriorityQueue源码解析
60 0
|
1月前
|
安全 Java 程序员
Collection-Stack&Queue源码解析
Collection-Stack&Queue源码解析
80 0

推荐镜像

更多