前后端联调 (springmvc 和 Jquery)

从 HTTP 开始

HTTP消息结构

HTTP 消息是客户端和服务器之间通信的基础，它们由一系列的文本行组成，遵循特定的格式和结构。
HTTP消息分为两种类型：请求消息和响应消息。

请求消息

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。

请求行：请求行包含方法，如 GET、POST、PUT、DELETE等；包含请求 URI，如http://xxxxxx；包含HTTP 版本，如 HTTP/1.1 或 HTTP/2。
请求头：请求头包含了客户端环境信息，常见的请求头包括Host、User-Agent、Accept、Accept-Encoding、Content-Length等。
请求体：在某些类型的HTTP请求（如 POST 和 PUT）中，请求体包含要发送给服务器的数据。

请求行的格式示例：`GET /index.html HTTP/1.1。

响应消息

HTTP 响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

状态行：状态行包含HTTP 版本，状态码和状态消息。（状态码：三位数，表示请求的处理结果，如 200 表示成功，404 表示未找到资源。）
响应头：常见的响应头包括Content-Type、Content-Length、Server、Set-Cookie等。
响应体：包含服务器返回的数据，如请求的网页内容、图片、JSON数据等。

HTTP内容类型

常见的媒体格式有：text/html（HTML格式），text/plain（纯文本格式）等等。
常见的以application开头的媒体格式类型有： application/json（ JSON数据格式），application/x-www-form-urlencoded（表单默认的提交数据的格式），application/octet-stream ：二进制流数据（文件下载）。

SpringMVC注解接收请求

@RequestMapping（处理请求方法）

@RequestMapping标记用于将HTTP请求映射到@Controller类中的请求处理程序方法。它可以用于指定请求的URL路径、HTTP请求方法等等。

@Controller
class VehicleController {

    @RequestMapping(value = "/vehicles/home", method = RequestMethod.GET)
    String home() {
        return "home";
    }
}

@GetMapping、@PostMapping、@PutMapping、@DeleteMapping 和 @PatchMapping 是 @RequestMapping 的不同变体，HTTP 方法已分别设置为 GET、POST、PUT、DELETE 和 PATCH。

@RequestParam（以键值形式绑定到请求行）

@RequestMapping
Vehicle getVehicleByParam(@RequestParam("id") long id) {
        // ...
}

@PathVariable（以模板形式绑定到请求行）

这个注解绑定到了请求URI 。我们可以用 @RequestMapping 注释指定 URI 模板，并使用 @PathVariable 将方法参数绑定到模板部分之一。

@RequestMapping("/{id}")
Vehicle getVehicle(@PathVariable("id") long id) {
     // ...
}

@RequestBody（绑定到请求体）

@RequestBody 注解可以将请求体自动映射到一个对象中，通常情况下，请求体的内容类型是 application/json 或 application/xml，而对象类型可以是 JavaBean 或其他类型的对象。使用 @RequestBody 注解可以方便地将请求体中的数据转换成一个对象，方便后续的处理。

@PostMapping("/save")
void saveVehicle(@RequestBody Vehicle vehicle) {
    // ...
}

非注解：表单接收对象（在请求行中的name = value）

@PostMapping("/save")
void saveVehicle(Vehicle vehicle) {
    
}

Jquery的ajax方法发送请求

AJAX 就是异步读取后台数据并将其显示在网页上，而无需重新加载整个页面。JavaScript的XMLHttpRequest方法和 Jquery的ajax方法都是实现 Ajax 的方式之一。

语法

$.ajax(*{name:value, name:value, … }*)

重要参数

col1	col2
url	规定发送请求的 URL。默认是当前页面
type	规定请求的类型（GET 或 POST）
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data	规定要发送到服务器的数据。（请求体中的数据）
dataType	预期的服务器响应的数据类型。
success(result,status,xhr)	当请求成功时运行的函数（状态码200）
error(xhr,status,error)	当请求成功时运行的函数（其他状态码）

示例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
      $("#div1").html(result);
    }});
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>