目录
JSON 数据格式
JSON 是一种存储键值对数据的格式
它直接包括了属性的名称和属性的值,与 JavaScript 的对象极为相似,它到达前端后,可以直接转换为对象,以对象的形式进行操作和内容的读取
以学生对象为例
{ "name": "杰哥", "age": 18 }
多个学生可以以数组的形式表示
[
{ "name": "杰哥", "age": 18 },
{ "name": "阿伟", "age": 18 }
]
嵌套关系可以表示为
{
"studentList": [
{ "name": "杰哥", "age": 18 },
{ "name": "阿伟", "age": 18 }
],
"count": 2
}
可以直接将JSON数据转化为JS对象
let obj = JSON.parse(
'{"studentList": [{"name": "杰哥", "age": 18}, {"name": "阿伟", "age": 18}], "count": 2}'
);//将JSON格式字符串转换为JS对象
obj.studentList[0].name; //直接访问第一个学生的名称
将 JS 对象转换为 JSON 字符串
JSON.stringify(obj);
后端就可以以 JSON 字符串的形式向前端返回数据,这样前端在拿到数据之后,就可以快速获取信息
JSON 解析框架有很多种,比较常用的是 Jackson 和 FastJSON
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.78</version>
</dependency>
JSONObject是对 JSON 数据的一种对象表示,它和 Map 的使用方法一样(实现了 Map 接口),同样的还有 JSONArray,它表示一个数组,用法和 List 一样,数组中可以嵌套其他的 JSONObject 或是 JSONArray
@RequestMapping(value = "/index")
public String index(){
JSONObject object = new JSONObject();
object.put("name", "杰哥");
object.put("age", 18);
System.out.println(object.toJSONString()); //以JSON格式输出JSONObject字符串
return "index";
}
当出现循环引用时,会按照以下语法来解析
可以直接创建一个实体类,将实体类转换为 JSON 格式的数据
@RequestMapping(value = "/index", produces = "application/json")
@ResponseBody
public String data(){
Student student = new Student();
student.setName("杰哥");
student.setAge(18);
return JSON.toJSONString(student);
}
修改了`produces`的值,将返回的内容类型设定为`application/json`,表示服务器端返回了一个 JSON 格式的数据(当然不设置也行,也能展示,这样是为了规范)然后我们在方法上添加一个`@ResponseBody`表示方法返回(也可以在类上添加`@RestController`表示此 Controller 默认返回的是字符串数据)的结果不是视图名称而是直接需要返回一个字符串作为页面数据,这样,返回给浏览器的就是我们直接返回的字符串内容。
SpringMVC 非常智能,可以直接返回一个对象类型,它会被自动转换为 JSON 字符串格式
@RequestMapping(value = "/data", produces = "application/json")
@ResponseBody
public Student data(){
Student student = new Student();
student.setName("杰哥");
student.setAge(18);
return student;
}
注意需要在配置类中添加一下 FastJSON 转换器(默认只支持 JackSon)
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
converters.add(new FastJsonHttpMessageConverter());
}
AJAX 请求
Ajax 即Asynchronous Javascript And XML(异步 JavaScript 和 XML),它的目标就是实现页面中的数据动态更新,而不是直接刷新整个页面,只是一个概念
在 JQuery 框架中有实现(JQuery 极大地简化了 JS 的开发)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
前端界面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script th:src="@{/static/test.js}"></script>
</head>
<body>
<span id="username"></span>
<span id="age"></span>
<button onclick="updateData()">点我更新页面数据</button>
</body>
</html>
js代码
function updateData() {
//美元符.的方式来使用Ajax请求,这里使用的是get方式,第一个参数为请求的地址(注意需要带上Web应用程序名称),第二个参数为成功获取到数据的方法,data就是返回的数据内容
$.get("/mvc/data", function (data) {
//获取成功执行的方法
window.alert("接受到异步请求数据:" + JSON.stringify(data)); //弹窗展示数据
$("#username").text(data.name); //这里使用了JQuery提供的选择器,直接选择id为username的元素,更新数据
$("#age").text(data.age);
});
}
后端也需要编写相应的发送数据的代码
使用 JQuery 非常方便,可以直接通过 JQuery 的选择器就可以快速获取页面中的元素
向服务端发送一个 JS 对象数据并进行解析
js编写
function submitData() {
$.post(
"/mvc/submit",
{
//这里使用POST方法发送请求
name: "测试", //第二个参数是要传递的对象,会以表单数据的方式发送
age: 18,
},
function (data) {
window.alert(JSON.stringify(data)); //发送成功执行的方法
}
);
}
服务器端只需要在请求参数位置添加一个对象接收即可(因为这里是提交的表单数据)
@RequestMapping("/submit")
@ResponseBody
public String submit(Student student){
System.out.println("接收到前端数据:"+student);
return "{\"success\": true}";
}
也可以将 js 对象转换为 JSON 字符串的形式进行传输,需要使用 ajax 方法来处理
function submitData() {
$.ajax({
//最基本的请求方式,需要自己设定一些参数
type: "POST", //设定请求方法
url: "/mvc/submit", //请求地址
data: JSON.stringify({ name: "测试", age: 18 }), //转换为JSON字符串进行发送
success: function (data) {
window.alert(JSON.stringify(data));
},
contentType: "application/json", //请求头Content-Type一定要设定为JSON格式
});
}
如果需要读取前端发送给的 JSON 格式数据,那么这个时候就需要添加`@RequestBody`注解
@RequestMapping("/submit")
@ResponseBody
public String submit(@RequestBody JSONObject object){
System.out.println("接收到前端数据:"+object);
return "{\"success\": true}";
}
实现了前后端使用 JSON 字符串进行通信