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