Maven文件：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wuyilong</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
控制層：
package com.demo.controller;
import com.demo.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
/**
* @Auther: wuyilong
* @Date: 2019/4/11 09:20
* @Description:
*/
@Controller
@RequestMapping("/test")
public class TestController {
@GetMapping(value = "/index")
public String index() {
return "index";
}
@RequestMapping(value = "/ajax", method = RequestMethod.POST)
@ResponseBody
//@RequestBody是作用於參數的，它實現了把客戶端傳過來的json數據解析為對象，作為參數傳進來，不過客戶端傳過來的數據類型必須是application/json,不然會出錯
private User ajax(@RequestBody User user) {
System.out.println("收到ajax請求");
System.out.println(user.getName());
User u = new User();
u.setId("1");
u.setName("user");
u.setPassword("1234");
return u;
}
}
User類
package com.demo.entity;
/**
* @Auther: wuyilong
* @Date: 2019/4/11 09:19
* @Description:
*/
public class User {
private String id;
private String name;
private String password;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
前端頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
function myfun() {
alert("message");
$.ajax({
type:"post",
url:"/test/ajax",
contentType:"application/json;charset=utf-8",
data:'{"id":"1","name":"asd","password":"abc"}',
dataType:"json", // 這里聲明收到的服務器的響應數據類型，如果是json的話，不聲明也可以正常使用
success:function (data) {
//響應成功后回調函數
alert("收到響應");
$("#r").html(JSON.stringify(data)); //這里將json轉為字符串顯示(data其實是個object,不轉換的話會顯示為一片空白)
},
error:function () {
alert("error");
}
});
}
</script>
</head>
<body>
<button id="btn" type="button" onclick="myfun()">Click Me!</button>
<p id="r"></p>
</body>
</html>
前端頁面測試2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
function myfun() {
alert("message");
var param = {}
param.id = $("#id").val();
param.name = $("#name").val();
param.password = $("#password").val();
$.ajax({
type:"post",
url:"/test/ajax",
contentType:"application/json;charset=utf-8",
data: JSON.stringify(param), // JSON.stringify() 將JS對象轉化為JSON格式
dataType:"json", // 這里聲明收到的服務器的響應數據類型，如果是json的話，不聲明也可以正常使用
success:function (data) {
//響應成功后回調函數
alert("收到響應");
$("#r").html(JSON.stringify(data)); //這里將json轉為字符串顯示(data其實是個object,不轉換的話會顯示為一片空白)
},
error:function () {
alert("error");
}
});
}
</script>
</head>
<body>
<p>id: <input type="text" name="id" /></p>
<p>name: <input type="text" name="name" /></p>
<p>password: <input type="text" name="password" /></p>
<button id="btn" type="button" onclick="myfun()">Click Me!</button>
<p id="r"></p>
</body>
</html>
測試2運行：
總結：
1、JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字符串
2、contentType:"application/json;charset=utf-8",//這里很重要，不能省略，因為默認的類型是application/x-www-form-urlencoded,如果不設置的話后台就無法使用@RequestBody正常接收
3、data:'{"id":"1","name":"asd","password":"abc"}' ,//這里有一點尤其要注意，在網上查到的資料有的是{"key":"value"}這種形式的，大括號兩端沒有引號，經過測試，這樣是不行的，必須整個加上引號
4、dataType:"json",//這里聲明收到的服務器的響應數據類型，如果是json的話，不聲明也可以正常使用
5、如果需要返回json或者xml或者自定義mediaType內容到頁面，則需要在對應的方法上加上@ResponseBody注解
原文：https://blog.csdn.net/qq_35603331/article/details/75094935