json数据的处理

69 阅读 0 评论 46 点赞

我是靠谱客的博主默默背包，最近开发中收集的这篇文章主要介绍json数据的处理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = init;
function init() {
//1、获取部门节点
var dn = document.getElementById("dep");
//2、为该节点创建onchange
dn.onchange = getPerson
//3、创建一个getPerson的方法来处理事件
}
function getPerson() {
var did = this.value;
//1、获取XMLHttpRequest;
var xhr = new XMLHttpRequest();
//2、通过xhr来打开页面，使用POST
xhr.open("POST", "personJson.do", true);
xhr.onreadystatechange = function() {
//3、处理请求
if(xhr.readyState == 4 && xhr.status == 200) {
//3.1、获取json
var json = xhr.responseText;
//如果传递的是json可以直接通过xhr.responseText获取。
//3.2、此时json是一个字符串，如果要转换为对象需要使用eval
var ps = eval(json);
var node = "";
for(var i = 0; i < ps.length; i++) {
//json就是已经是个javascirpt的对象了，可以直接使用
node += ps[i].id + "--------" + ps[i].name + "--------" +
ps[i].age + "<br/>";
}
//3.4、写入到persons
document.getElementById("persons").innerHTML = node;
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("did=" + did); //4、发送信息,需要传入did
}</head>
<body>
<select id="dep">
<option value="1">普通组</option>
<option value="2">明星组</option>
<option value="3">西游组</option>
</select>
<div id="persons"></div>
</body>
</html>

Json 接受数据是使用 responseText 来接受，默认是字符串，所以要将字符串转换为 json数据，使用 eval 这个全局函数，将字符串转换为 javascript 脚本，javascript 就能识别为 json对象了。