版权声明:转发能告知我一声让我高兴一下吗...记得标明来源哇 https://blog.csdn.net/aic1999/article/details/82845531
导言
从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