博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jq:get获取json数据并以表格形式生成到页面
阅读量:6633 次
发布时间:2019-06-25

本文共 876 字,大约阅读时间需要 2 分钟。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jq-get方法</title>

<script type="text/javascript" src="../jquery-2.1.3.min.js"></script>

<script type="text/javascript">

$(function(){

                     $("input").click(function(){

                             $.get("test.json",function(data){

                                     var data=data;

                                     var str="<table  border=1 width=100%>";

                                     str+="<tr>";

                                     for(var n in data[0]){

                                             str+="<th>"+n+"</th>";

                                     }

                                     str+="</tr>";

                                     for(var i=0;i<data.length;i++){

                                             str+="<tr>";

                                             for(var n in data[i]){

                                                     str+="<td align='center'>"+data[i][n]+"</td>";

                                             }

                                             str+="</tr>";

                                     }

                                     str+="</table>";

                                     $("div").html(str);

                             })

                     })

             })

</script> 

</head> 

 

<body>

<input type="button" value="向服务器发出异步请求" />

<div></div>

</body> 

 

</html>

 

test.json文件:

[

{

"name": "艳艳",

"pass": "123456",

"age": "26"

 

},

{

"name": "张三",

"pass": "88888888",

"age": "28"

 

},

{

"name": "李四",

"pass": "111111",

"age": "29"

 

}

]

 

转载于:https://www.cnblogs.com/niwalala/p/5099627.html

你可能感兴趣的文章
Kubernetes 在知乎上的应用
查看>>
【死磕 Spring】----- IOC 之解析 bean 标签:BeanDefinition
查看>>
PHP浮点数的精确计算BCMath
查看>>
基于Token认证的WebSocket连接
查看>>
【Solidity】2.合约的结构体 - 深入理解Solidity
查看>>
【IOS-COCOS2D-X 游戏开发之二】【必看篇】总结阐述COCOS2D-X与COCOS2D-IPHONE区别;
查看>>
前端面试回忆录 - 滴滴篇 - 凉面
查看>>
jxl导入Excel 切割List 并使用MyBatis批量插入数据库
查看>>
小程序开发总结
查看>>
管理ORACLE实例
查看>>
JavaScript 闭包
查看>>
java获取当前时间前一周、前一月、前一年的时间
查看>>
话说WEB开发之页面重绘和回流
查看>>
using标识使用
查看>>
T264接口说明
查看>>
SELinux介绍
查看>>
Rsyslog实现Nginx日志统一收集
查看>>
linux文本处理三剑客之grep家族及其相应的正则表达式使用详解
查看>>
Python---装饰器
查看>>
s17data01
查看>>