Ajax（从json中提取数据）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax（从json中提取数据）相关的知识，希望对你有一定的参考价值。
json数据为：
out.println("name:'平凡的世界',author:'路遥'");
ajax中，接收json数据时：
var result = request.responseText;
eval("var movie = " +result);
document.getElementById("div2").innerhtml = movie.name+":"+movie.author;
请问：eval("var movie = " +result);什么意思？
还有为什么还要赋值给movie，为什么不能直接用
document.getElementById("div2").innerHTML = result.name+":"+result.author; ？？
eval这个函数的作用，怎么用的？
eval("var movie = " +result); 这句意思就是把字符串变成可以直接使用的对象
执行后就相当于
var movie=name:'平凡的世界',author:'路遥';把json对免赋值给movie变量
那么就可以直接引用了movie.name就是“平凡的世界”了movie.author就是“路遥”了，希望你能懂 参考技术A 该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
参考资料：http://www.w3school.com.cn/js/jsref_eval.asp
参考技术B var movie =eval("(" +result +")");获取数据movie.name,movie.author.就可以了
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中提取数据）的主要内容，如果未能解决你的问题，请参考以下文章
使用公共 API 从站点中提取 JSON 数据并将其异步显示在页面上