导言

从jsp学到js，我一直很无力的地方就是：同样的代码，在不同的浏览器上效果有时候居然不一样。而且数据如何保存到设备中呢？其实可以使用xml，但是xml缺点较多。这里使用——JSON，串行化解决这类问题。

对象

一般用花括号{}表示。没有var定义对象名字、属性名加双引号、没有分毫结束的是对象。例如下例的person对象。

JSON（JavaScript Object Notation）

对象表示法，即将对象转换成字符串，是js的子集。能够表示对象和数据，其实就是一种数据格式。

【例题】JSON简单使用实例，串行化和反串行化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONdemo</title>
</head>
<body>
<script type="text/javascript">
    var person={		//一个person对象
		firstName:"john",
		lastName:"Doe",
		age:30
    };
    //串行化（字符串变成json）
    var json=JSON.stringify(person);    //输出{"fistName":"john","lastName":"Doe","age":30}
    alert(json);
    //反串行化（解析json得到字符串）
    var johnDoe=JSON.parse(json);
    var fullName=johnDoe.firstName+""+johnDoe.lastName;	
    alert(fullName);		//输出：johnDoe
</script>
</body>
</html>

【实例】提交JSON数据给第三方库

首先要在webcontent-WEB-INF-lib下导入第三方库：第三方jar包下载（后面ajax也要用）

在下面这个界面我们定义了一个对象并提交给第三方库。

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<body>
<form id="form1" action="" method="post">
<input type="hidden" name="xx" id="shuju">
</form>
<script>
	//花括号，定义了对象person。
   var person = {
	    firstName:"John",
	    lastName:"Doe",
	    age:30
	};
    //对象串行化
	var json=JSON.stringify(person);
	//将json串作为隐藏域的value值通过表单传递
	var input=document.getElementById("shuju");
	input.value=json;
	//提交表单
	var form1=document.getElementById("form1");
	form1.action="JSONdemo.jsp";//提交给谁
	form1.submit();	//提交
	//对象不能传递，传参数只能传递字符串，所以需要用到json
	//json其他应用：从数据库取出来的值，将它封装成对象，利用库返回给我们。
	
</script>

</body>
</html>

使用第三方库处理传递过来的对象信息。

JSONDemo.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="UTF-8"
    import="net.sf.json.*"
    %>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
	//接受参数
	String jsonstr=request.getParameter("xx");
	out.println(jsonstr);	//{"firstName":"John","lastName":"Doe","age":30}
	
	//使用第三方库（记得Import包），处理json数据
	JSONObject obj=JSONObject.fromString(jsonstr);//需要导入外包
	out.println("After handle:<br>");
	out.println("firstName:"+obj.getString("firstName")+"<br>");
	out.println("age:"+obj.getInt("age")+"<br>");
	
	//java生成json
	JSONObject obj2=new JSONObject();
	obj2.put("firstName","kate");
	obj2.put("lastName","Moss");
	obj2.put("age",39);
	out.println(obj2.toString());

	//将json2传递给显示界面showjson.jso
	request.setAttribute("user", jsonstr);	//jsonstr或者obj2都可以
%>
<!-- 请求转发 -->
<jsp:forward page="showjson.jsp"/> 

</body>
</html>

显示第三方库接收到的信息。

showjson.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 
<script type="text/javascript">
//获取动态传递的数据，从request中取值
var user=<%=request.getAttribute("user") %>;
document.write(user.firstName); 
</script>

【输出】John

JS（6）JSON实现跨浏览器代码

导言

对象

JSON（JavaScript Object Notation）

猜你喜欢