jq:get获取json数据并以表格形式生成到页面
<!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"
}
]
jq:get获取json数据并以表格形式生成到页面的更多相关文章
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- (转)android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 复制代码 ...
- android客户端从服务器端获取json数据并解析的实现代码(重要)
首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的URL中获取数组 * @param urlPath * @return * @throws Exc ...
随机推荐
- 【docker】docker初试与填坑
docker是最近很流行的部署方式,最近尝试之前的项目都转移到docker上运行,下面是碰到的一些坑和解决方案. 网络问题 因为国内的原因,docker pull 镜像的时候经常碰到连不上或者速度极慢 ...
- NET Core & VS Code 之路(2) Web API
NET Core & VS Code 之路(2) Web API 开发Core项目的条件 Visual Studio 2015 Update 3 .NET Core 1.0.0 - VS 20 ...
- JS--图片轮播效果
搞了很长时间才弄清楚图片轮播效果的原理,理解各个事件发生的原因,浪费了这么长的时间,只怪自己的知识太过于薄弱.现将代码写下,供大家参看,如有不妥之处还望指出,大家一起学习. 功能: 1.点击左右两边的 ...
- 用Doxygen生成文档
我是生成C/C++的文档,输出html格式的文档.就不做成CHM了. 注释要这种写:(当然,有数种注释风格,选择任意你喜欢的就行) /** * * 一系列的doxygen的 command * * * ...
- Android ContentProvider完整案例
ContentData类,提供数据常量: /** * 提供ContentProvider对外的各种常量,当外部数据需要访问的时候,就可以参考这些常量操作数据. * @author HB * */ pu ...
- COJ 0557 4013多重部分和问题
4013多重部分和问题 难度级别:B: 运行时间限制:2000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 n种大小不同的数字 Ai,每种各Mi个,判断是否可以从 ...
- 警惕P2B模式
大家都知道P2P是什么,估计也有很多人了解P2B的意思,这里也不多做解释,但是为什么要警惕P2B,这里我要做详细说明,希望能给大家一个参考. 首先我们要把P2B分成两种,一种是针对大型企业, ...
- bzoj4096 [Usaco2013 dec]Milk Scheduling
Description Farmer John has N cows that need to be milked (1 <= N <= 10,000), each of which ta ...
- Uber明年在中国将继续补贴,并大举进军100个城市!
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- [Qt] CFlip 翻页功能实现
由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...