- 前后台最最传统的交互方式就是表单交互,然后用request.setAttribute方法设置结果,渲染jsp,然而随着前台界面的复杂程度的提高,或者是使用了某些前端框架(sigmagrid)越来越多的界面会使用异步方式提交数据。那么这个过程大致是什么样的?
后端:我们假定使用的是java语言
前端:毫无疑问是js
1.json是啥子东东
- java语言是一种强类型的语言,必须定义类型,然后生成实例,而js却不是,虽然它也是面向对象的,但是它并没有先定义类这一种概念(但是js也有类型),它是基于原型的一种模式,和java完全不同。很显然,二者的原理,机制,语法并不能兼容。二者产生的对象并不能被对方解读。再来看网络传输,通常就是http/tcp协议喽,使用的其实是请求-响应,再说白了即使字符串,不论后台传来的是什么类型的数据,也不论前台传回的什么类型的数据,网络层统统当作字符串处理,它也没有办法来解析类型啊!说到这里,前后台传数据也就只能用字符串了,那也就意味着它们各自都要完成一个转换过程,把要发送的转换成字符串,把要收到的字符串解析成自己的对象。因为传输的字符串会涉及前后台双方的解析和处理,所以双方都必须认识或者知道字符串该怎么转,也就是说,最好能有一种通用的规则来编辑,转换字符串,这个标准或者协议就是JSON,JSON就是用来交换数据的,是一种string,一种独立于平台的数据格式。
这样一来,前台就需要把自己的数据类型转成JSON,然后发给后台,后台在用JSON来解析数据,转换成自己的类型。后台传前台一样。那么,怎么把自己的数据转成JSON呢?
-
如果知道JSON什么格式,完全可以自己拼写string,但是这样不能避免完全正确,而且可能会有安全隐患,那么就用第三方提供的库。
-
在js中,可以使用JSON.stringify()函数,把一个js中的对象转成json的string,也可以使用JSON.parse()函数,把一个json的string转成一个js里的对象。
-
在java中,有JSONObject和JSONArray两个对象,转string就用它们的toString()函数,转对象,就用toBean()和toArray()函数。需要注意的是JSONObject必须是string的键。也可以使用Jackson等工具类,下面是一个示例:
//使用json的转换工具将对象转换成json格式字符串返回
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(user);
String s = user.toString();
最后来看一下异步函数,常用的就是$.ajax,使用前记得引入jQuery,往后台传参数的时候,用的是一个键值对,也就是该函数的第二个参数,里面的值按照之前的说法,必须是string,那么我这里js定义了一个对象obj,要把它传到后台,必须先用stringify函数处理才行。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script>
var userList = new Array();
userList.push({name: "liyuqi", age: 18});
userList.push({name: "hahha", age: 22});
$.ajax({
type:"POST",
url:"${pageContext.request.contextPath}/user/getList2",
data:JSON.stringify(userList),
contentType:"application/json;charset=utf-8"
});
</script>
</head>
<body>
</body>
</html>
tips:
- 添加 contentType:“application/json“之后,向后台发送数据的格式必须为json字符串
- 不添加 contentType:“application/json“的时候可以向后台发送json对象形式
- 当向后台传递复杂json的时候,同样需要添加 contentType:“application/json“,然后将数据转化为字符串