对 json 数据的支持
ajax 的的格式:
var xhr = new XMLHttpRequest(); 可以在页面不刷新的情况下与服务器进行交互 xhr.onload = function() { var json = xhr.responseText;//拿到 json 字符串 JSON.parse(json); // 把 json 字符串转为 js 对象 }; xhr.open("get|post", url, true|false); xhr.send();
相关注解
@ResponseBody 注解
- 加在控制器方法上,将控制器方法的返回结果转换为json字符串,并写入响应
@RestController 注解
- 加在控制器类上,表示所有控制器方法都加了 @ResponseBody 注解
@RequestMapping("自定义的地址") 注解
- 不区分 get,post
@GetMapping("自定义的地址") 注解
- 专门匹配 get 请求 等价于 @RequestMapping(path="自定义的地址",method=RequestMethod.GET)
- get 一般对应查询操作 select
@PostMappping("自定义的地址") 注解
- 专门匹配 post 请求
- post 一般对应新增操作 insert
@DeleteMapping("自定义的地址") 注解
- 专门匹配 delete 请求
- delete 对应删除操作 delete
@PutMapping("自定义的地址") 注解
- 专门匹配 put 请求
- put 对应修改操作 update
@RequestBody
- 把请求中的json 字符串,转换为java 对象
@RequestBody例子如下:
服务器端代码:
@PostMapping("/json4") // @RequestBody 作用是把请求体中的 json 字符串,转为 java 中的对象 public void json4(@RequestBody Student student) { System.out.println(student); System.out.println("ok"); }
客户端代码:
function sendStudent() { var student = {"id": 2, "name":"李四"}; // {id: 2, name:"李四"} var xhr = new XMLHttpRequest(); xhr.open("post", "/json4", true); // 设置请求体的格式为 json 格式 xhr.setRequestHeader("content-type", "application/json"); // 将 js 对象 转为为 json 字符串, 并作为请求体, 发送给服务器 xhr.send( JSON.stringify(student) ); }
请求跨域(或者叫请求跨源)
两个应用程序,ip 地址不一样或是端口号不一样,就称之为跨域,如:localhost:8080 提供控制器,返回json数据, localhost:9090 想要获取 localhost:8080 的json数据,在默认情况没有权限访问的,但是通过 cors 的技术,其他域的机器就可以访问我(localhost:8080)的数据,否者在ip 地址不一样或是端口号不一样的情况下数据是不能共享的(也就是不能访问另一个域的机器)。
@CrossOrigin("允许访问我的数据的ip地址"),例子如下:
@CrossOrigin("http://192.168.9.3") // 只允许9.3 访问 @CrossOrigin("http://192.168.9.3,http://192.168.9.4,http://192.168.9.5") //允许多个ip访问 @CrossOrigin("*") // 允许所有域访问
- 可以加在方法上,表示只有此方法允许跨域
- 还可以加在控制器类上,表示此控制器中的所有方法都允许跨域
重定向请求
请求重定向也就是,页面跳转时,地址栏的地址也会跟着变化成跳转到的页面的地址。
格式: return "redirect:地址";
例子如下:
@RequestMapping("/test1") public String test1() { // 重定向到 /test2 控制器 return "redirect:/test2"; } //到时候地址栏跳转时会变成/test2 @RequestMapping("/test2") public void test2() { //... }
代码演示
1、传统实现 json 的转化和 springmvc 中json转化的对比
用来储存信息的类,Student
public class Student {
private int id;
private String name;
@Override
public String toString() {
return "Student{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
处理 json 字符串
import com.fasterxml.jackson.databind.ObjectMapper;
import com.westos.domain.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
@Controller
//@RestController 相当于 @Controller, 认为每个控制器的方法上都加了 @ResponseBody
public class JsonController {
// 传统方式, 自己调用 ObjectMapper 来实现 json 转换,实现浏览器上输出Student{id=2, name='李四'}
@RequestMapping("/json1")
public void json(HttpServletResponse response) throws IOException {
Student student = new Student();
student.setId(1);
student.setName("王大帅");
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(student);
response.setCharacterEncoding("utf-8");
response.setContentType("application/json");
response.getWriter().print(json);
}
// PostMapping 相当于 @RequestMapping(path="/json2", method= RequestMethod.GET)
@PostMapping("/json2")
// 响应 体 (响应内容),获取控制器方法的返回值,并且把返回值转换为 json 字符串, 并作为 响应体内容返回
@ResponseBody
public Student json2() {
Student student = new Student();
student.setId(1);
student.setName("王小帅");
return student;
}
@RequestMapping("/json3")
@ResponseBody
public List<Student> json3() {
Student student = new Student();
student.setId(1);
student.setName("王小帅");
Student s2 = new Student();
s2.setId(2);
s2.setName("王小衰");
List<Student> students = Arrays.asList(student, s2);
return students;
}
// @RequestBody 作用是把请求体中的 json 字符串,转为 java 中的对象
@PostMapping("/json4")
public void json4(@RequestBody Student student) {
System.out.println(student);
}
}
jsp页面 使用 ajax 技术 不需要刷新就可以得到结果
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" value="获取学生数据" onclick="getStudent()">
<input type="button" value="发送学生数据" onclick="sendStudent()">
<script>
function getStudent() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
//把字符串 转为json对象
var student = JSON.parse(xhr.responseText);
//控制台上输出 json 字符串
console.log(student);
};
xhr.open("post", "/json2", true);
xhr.send();
}
function sendStudent() {
var student = {"id": 2, "name":"李四"}; // {id: 2, name:"李四"}
var xhr = new XMLHttpRequest();
xhr.open("post", "/json4", true);
xhr.setRequestHeader("content-type", "application/json");
// 将 js 对象 转为 json 字符串, 并作为请求体, 发送给服务器
xhr.send( JSON.stringify(student) );
}
</script>
</body>
</html>
结果
jsp页面如下,图如下:
当点击获取数据时,浏览器上的console输出,图如下:
当点击发送数据时,服务器上输出(编译器上输出)
Student{id=2, name='李四'}
把 jsp 中 getStudent() 方法的 open 的地址改为 /json1,也就是用传统方式输出,浏览器输出如下图:
把 jsp 中 getStudent() 方法的 open 的地址改为 /json3,浏览器输出如下图:
通过以上对比可以发现 spring mvc 中 把对 json 的转变封装了起来,用的时候只用注解的方式调用即可,这样不仅代码变得简洁了,还时我们的工作量变小了。
如果对ajax不是很了解的话,请看这条链接:https://blog.csdn.net/grey_mouse/article/details/86573366