直接看图看代码!
testJSON2.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String myMessage = "{name:\"杨过\",age:\"19\",sayHello:function(){alert(\"hello,我是杨过\");}}";
request.setAttribute("message", myMessage);
String myMessage2 = "{name:'韦小宝',age:'14',sayHello:function(){alert('hello,我是韦小宝');}}";
request.setAttribute("message2", myMessage2);
String myMessage3 = "{name:'段誉',age:'22',hobby:['电影','音乐','阅读'],sayHello:function(){alert('hello,我是段誉');}}";
request.setAttribute("message3", myMessage3);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>解析json</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/input2.css">
</head>
<body>
<center>
<h2>解析Json</h2>
用户名:<input type="text" id="userName"><br><br>
密码:<input type="text" id="age"><br><br>
爱好:<input type="text" id="hobby"><br><br>
<div class="testDiv3" id="showText">
</div><br>
<input type="button" value="解析Json数据" οnclick="analyzeJsonData()">
<input type="button" value="解析Json数据2" οnclick="analyzeJsonData2()">
<input type="button" value="解析Json数据3" οnclick="analyzeJsonData3()">
<input type="button" value="清空" οnclick="cleanTextDiv()">
</center>
</body>
<script type="text/javascript">
var testJson = '{name:"令狐冲",age:"17",sayHi:function(){alert("hello,我是令狐冲,我今年" + this.age + "岁了!");}}';
//测试下属性值有{}花括号字符能不能正确解析
var testJson2 = '{name:"囧{}囧",age:"6",hobby:["电{影","音}乐","阅{}读"]}';
var testJson3 = {name:"张无忌",age:"18",hobby:["电{影","音}乐","阅{}读"],sayHello:function(){alert("hello,我是张无忌,我今年" + this.age + "岁了!" + "我的爱好是" + this.hobby);}};
var testJson4 = '${requestScope.message}';
var testJson5 = "${requestScope.message2}";
var testJson6 = ${requestScope.message3};
alert(testJson);
alert(testJson3);
alert(testJson4);
//解析Json
function analyzeJsonData(){
//调用testJson3对象的sayHello()方法
testJson3.sayHello();
alert("测试");
var obj = eval("(" + testJson + ")");
//调用obj对象的sayHi()方法
obj.sayHi();
document.getElementById("userName").value = obj.name;
document.getElementById("age").value = obj.age;
var obj2 = eval("(" + testJson2 + ")");
//var obj2 = eval((testJson2));
//var obj2 = eval(testJson2);
document.getElementById("userName").value = obj2.name;
document.getElementById("age").value = obj2.age;
document.getElementById("hobby").value = obj2.hobby;
var showTextDivNode = document.getElementById("showText");
var obj3 = eval(testJson3);
showTextDivNode.innerHTML += "testJson3=" + obj3.name + " / " + obj3.age + "<br>";
showTextDivNode.innerHTML += "testJson3=" + testJson3.name + " / ";
showTextDivNode.innerHTML += testJson3.age + "<br>";
var obj4 = eval('(' + testJson4 + ')');
showTextDivNode.innerHTML += "testJson4=" + obj4.name + " / " + testJson4.name + "<br>";
var obj5 = eval("(" + testJson5 + ")");
showTextDivNode.innerHTML += "testJson5=" + obj5.name + " / " + testJson5.name + "<br>";
var obj6 = eval(testJson6);
showTextDivNode.innerHTML += "testJson6=" + obj6.name + " / " + obj6.hobby + " / " + testJson6.name + " / " + testJson6.hobby + "<br>";
testJson3.sayHello();
}
//解析Json
function analyzeJsonData2(){
var showTextDivNode = document.getElementById("showText");
var jsonStr = '{RecordCount:"108",RecordList:[{BALANCE:"69825.92",JFYE:"98562.89"}]}';
var jsonObj = eval("(" + jsonStr + ")");
//alert(jsonObj.RecordList.length);
//alert(jsonObj.RecordList[0].BALANCE);
//alert(jsonObj.RecordList[0].JFYE);
showTextDivNode.innerHTML += jsonObj.RecordCount + " / " + jsonObj.RecordList.length + " / " + jsonObj.RecordList[0].BALANCE + " / " + jsonObj.RecordList[0].JFYE + "<br>";
var jsonStr2 = {RecordCount:"668",RecordList:[{BALANCE:"827.98",JFYE:"996.21"}]};
var jsonObj2 = eval(jsonStr2);
//alert(jsonObj2.RecordList.length);
//alert(jsonObj2.RecordList[0].BALANCE);
//alert(jsonObj2.RecordList[0].JFYE);
showTextDivNode.innerHTML += jsonStr2.RecordCount + " / " + jsonStr2.RecordList.length + " / " + jsonObj2.RecordList[0].BALANCE + " / " + jsonObj2.RecordList[0].JFYE + "<br>";
}
//解析Json
function analyzeJsonData3(){
var showTextDivNode = document.getElementById("showText");
var onlineNames = ['华山派令狐冲','丐帮乔峰','段誉','韦小宝','明教张无忌','杨过'];
var citys = ["江西省于都县","江西省赣县","江西省兴国县","江西省赣州市",'江西省南昌市','江西省南康市'];
showTextDivNode.innerHTML += citys.length + " / " + citys[0] + "<br>"
showTextDivNode.innerHTML += onlineNames.length + " / " + onlineNames[0] + "<br>"
var citysObj = eval(citys);
showTextDivNode.innerHTML += citysObj.length + " / " + citysObj[0] + "<br>"
var jsonStr = {name:'囧囧',age:5};
showTextDivNode.innerHTML += jsonStr.name + " / " + jsonStr.age + "<br>";
var jsonObj = eval(jsonStr);
showTextDivNode.innerHTML += jsonObj.name + " / " + jsonObj.age + "<br>";
var jsonObj2 = eval("(" + jsonStr + ")");
showTextDivNode.innerHTML += jsonObj2.name + " / " + jsonObj2.age + "<br>";
}
//清空层里面的内容
function cleanTextDiv(){
document.getElementById("showText").innerHTML = "";
}
</script>
</html>