前后端数据的交互

1.前后端分离

前端负责页面展示和数据获取
后端负责业务逻辑处理和接口封装

2. json数据前后端交互

后端取出前端传送过来的json数据使用@ReuqestBody注解

@RequestBody注解用于读取http请求的内容(字符串)，通过springmvc提供的HttpMessageConverter接口将读到的内容转换为json、xml等格式的数据并绑定到controller方法的参数上

提交方式为POST时

JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象，后端用 @RequestParam 或者Servlet 获取参数。

JQuery Ajax 以 application/json 上传 JSON字符串，后端用 @RquestBody 获取参数。

	前端 Content-Type	Json/字符串	后端获取参数方式
1	application/x-www-form-urlencoded	对象	@RequestParam 或者Servlet
2	application/json	字符串	@RquestBody

3.获取参数的几种常用注解

注解	使用形式	方法
@PathVariable	url/{param}	GET，DELETE，PUT
@RequestParam	url?name=zhangsan	PUT，POST
@RequestBody	该注解将所有参数转换，在代码部分在一个个取出来

4.请求路径参数

GET请求

一般用于查询数据，采用明文进行传输，一般用来获取一些无关用户信息的数据，

@GetMapping 组合注解，是 @RequestMapping(method = RequestMethod.GET) 的缩写

get请求一般通过url传参，如：
http://localhost:8080/hello?id=1
后端要获取id参数，可以使用@RequestParam注解

@RestController
public class HelloController {
    @RequestMapping(value="/hello",method= RequestMethod.GET)
    public String sayHello(@RequestParam Integer id){
        return "id:"+id;
    }
}

如：http://localhost:8080/hello/1/zhangsan
后端使用@PathVariable可以接收路径参数1。

@RestController
public class HelloController {
    @RequestMapping(value="/hello/{id}/{name}",method= RequestMethod.GET)
    public String sayHello(@PathVariable("id") Integer id,
                           @PathVariable("name") String name){
        return "id:"+id+" name:"+name;
    }
}

5.Body参数

POST请求（json传值）

http://localhost:8080/demo

前端json

{
    "id": 1,
    "name": "zhangsan"
}

后端接收这种数据应该采用@RequestBody或者@requestparam

//map接收
@PostMapping(path = "/demo")
public void demo1(@RequestBody Map<String, String> person) {
    System.out.println(person.get("name"));
}
 
//或者是实体对象接收
@PostMapping(path = "/demo")
public void demo1(@RequestBody Person person) {
    System.out.println(person.toString());
}

注意

@RequestBody，它是用来处理前台定义发来的数据Content-Type: 而不是application/x-www-form-urlencoded编码的内容。
例如application/json, application/xml等；使用@RequestBody注解接收参数的时候，从名称上来看也就是说要读取的数据在请求体里。
前台的Content-Type必须要改为application/json，所以要发post请求，因为Ajax使用的POST，并且发送的是JSON对象。
前端必须指定请求json数据的contentType为：application/json。
否则会报类型不支持的异常错误“org.springframework.web.HttpMediaTypeNotSupportedException”。

当Ajax以application/x-www-form-urlencoded格式上传即使用JSON对象，后台只能使用@RequestParam 或者Servlet获取参数。 当Ajax以application/json格式上传即使用JSON字符串，后台可以使用@RquestBody或者@RequestParam获取。

6.请求头参数以及Cookie

post请求，Headers、cookie传值

在这里我们把Content-Type设置为了json格式。
我们还可以在headers里面加入别的参数，比如Token。
后端可以通过HttpServletRequest 获取请求头的内容，如：

request.getHeader(string name)方法:String 
request.getHeaders(String name)方法:Enumeration 
request.getHeaderNames()方法
 
@GetMapping("/demo1")
public void demo1(HttpServletRequest request) {
    System.out.println(request.getHeader("myHeader"));
    for (Cookie cookie : request.getCookies()) {
        if ("myCookie".equals(cookie.getName())) {
            System.out.println(cookie.getValue());
        }
    }
}

7.HttpServletRequest

前端js发送ajax请求，Content-Type发送信息至服务器时内容编码类型，默认是（ application/x-www-form-urlencoded 这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，这种形式是没有办法将复杂的 JSON 组织成键值对形式），

data_type设置你收到服务器数据的格式，不指定自动判断

var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
          /*
              Jquery默认Content-Type为application/x-www-form-urlencoded类型
           */
          $.ajax({
              type: \'POST\',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("error")
              }
          });

后端Servlet接受参数。前端报 200，后端报返回值都是null

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(HttpServletRequest request){
      System.err.println(request.getParameter("openid"));
      System.err.println(request.getParameter("username"));
      System.err.println(request.getParameter("password"));
}

后端改 @RequestBody 接受参数。前端报 415，后端报 Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported Http status 415 Unsupported Media Type

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Map<String,Object> map){
      System.err.println(map.get("username"));
      System.err.println(map.get("password"));
      System.err.println(map.get("openid"));
  }

前端加 contentType : “application/json”。前端报 200，后端能接受到参数

var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
$.ajax({
              type: \'POST\',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              contentType : "application/json",
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("fucking error")
              }
          });

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Map<String,Object> map){
      System.err.println(map.get("username"));
      System.err.println(map.get("password"));
      System.err.println(map.get("openid"));
	}
}

后端使用对象来获取参数。前端报 200，后端也ok

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Form form){
      System.err.println(form);
	}
}

@Data
public class Form {
  private String openid;
  private String username;
  private String password;
}