Ajax获取 Json文件提取数据
摘自
Ajax获取 Json文件提取数据
1. json文件内容(item.json)
[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com",
"url":"./img/1.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com",
"url":"./img/2.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com",
"url":"./img/3.jpg"
},
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com",
"url":"./img/4.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com",
"url":"./img/5.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com",
"url":"./img/6.jpg"
}
]
2.发送Ajax请求，获取Json数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css"> .p1{
font-size: 14px;
color: #000;
}
.p2{
font-size: 12px;
color: #b0b0b0;
}
.p3{
font-size: 14px;
color: #ff5f19;
}
.product{
width:100%;
position: relative;
margin: 20px 0 5px 0;
height: 100px;
background: #fafafa;
} .img{
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
.p{
display:inline-block;
float:left;
width:50%;
margin-top:6px;
font-family: Microsoft YaHei;
}
.p1{
margin-top:16px;
} </style>
<script>
//页面加载 获取全部信息
$(function(){
$.ajax({
type: "POST",//请求方式
url: "item.json",//地址，就是json文件的请求路径
dataType: "json",//数据类型可以为 text xml json script jsonp
success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
addBox(result);
}
});
/*$.get("item.json",function(result){
//result数据添加到box容器中;
addBox(result);
});*/
});
function addBox(result){
//result是一个集合,所以需要先遍历
$.each(result,function(index,obj){
$("#box").append("<div class='product'>"+//获得图片地址
"<div><img class='img' src="+obj['url']+"/></div>"+
//获得名字
"<div class='p1 p'>"+obj['name']+"</div>"+
//获得性别
"<div class='p2 p'>"+obj['sex']+"</div>"+
//获得邮箱地址
"<div class='p3 p'>"+obj['email']+"</div>"+
"</div>");
});
}
</script>
</head>
<body>
<!-- 构建装一个容器 -->
<div id="box">
</div>
</body>
</html>
3.运行效果
4.文件结构
Ajax获取 Json文件提取数据的更多相关文章
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- 【c++基础】从json文件提取数据
前言 标注数据导出文件是json格式的,也就是python的dict格式,需要读取标注结果,可以使用c++或者python,本文使用c++实现的. JsonCpp简介 JsonCpp是一种轻量级的数据 ...
- jquery ajax 获取 json 文件数据
[ {"name":"project1"}, {"name":"project2"}, {"name" ...
- AJAX获取JSON形式的数据
test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- ajax获取json数据 for select2
json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
- Linux 目录结构学习与简析 Part1
linux目录结构学习与简析 by:授客 QQ:1033553122 说明: / linux系统目录树的起点 =============== /bin User Bi ...
- loadrunner 场景设计-集合点设置
场景设计-集合点设置 by:授客 QQ:1033553122 1 作用 通过让多用户在同一时间点上进行并发操作来测试系统的并发处理的能力 2 实现 通过集合点函数来实现. 注意:集合点经常和事务结 ...
- 你不可不知的Java引用类型之——弱引用
定义 弱引用是使用WeakReference创建的引用,弱引用也是用来描述非必需对象的,它是比软引用更弱的引用类型.在发生GC时,只要发现弱引用,不管系统堆空间是否足够,都会将对象进行回收. 说明 弱 ...
- python编程的简洁代码
1.列表间元素操作 L1 = [1,3,5,]L2 = [2,5,3,1,8]x = set(L1)y = set(L2)#差集print(y - x)#交集print(y&x)#并集prin ...
- 解决SQL Server本地Windows身份无法登录
CREATE LOGIN [计算机名\Windows帐户名] FROM WINDOWS
- Java之代理（jdk静态代理，jdk动态代理，cglib动态代理，aop，aspectj）
一．概念 代理是什么呢?举个例子,一个公司是卖摄像头的,但公司不直接跟用户打交道,而是通过代理商跟用户打交道.如果:公司接口中有一个卖产品的方法,那么公司需要实现这个方法,而代理商也必须实现这个方法. ...
- 系统运维|SqlServer2008|数据库日志文件过大需要清理的操作攻略
摘要: 1.执行SQL语句改成“简单模式” 2.收缩数据库 3.执行SQL语句改回“完全模式” 原文链接: http://www.lookdaima.com/WebForms/WebPages/B ...
- Win7系统system进程句柄数一直增加解决方案
公司内部最近有个服务端的同事电脑句柄数一开机就一直增加 一台Windows7x64系统16G 其实物理内存使用情况在开机后并没有太大的变化,但虚拟内存占用明显在不停的增加. 我通过“任务管理器”一直也 ...
- 【PAT】B1027 打印沙漏（20 分）
#include<cstdio> #include<stdlib.h> char C='*'; int qiushu(int hang){//输入行数,求出字符数 int su ...
- Windows端部署zabbix-agent
一.windows客户端的配置关闭windows防火墙或者开通10050和10051端口(1).关闭防火墙(不推荐直接关闭,测试可以这样做,尤其是最近勒索病毒猛烈)开始—控制面板—windows防火墙 ...