发ajax响应json格式数据

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、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> <groupId>com.ly.mvc</groupId>
<artifactId>springmvc02</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging> <name>springmvc02 Maven Webapp</name>

<url>http://www.example.com</url> <properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>13</maven.compiler.source>
<maven.compiler.target>13</maven.compiler.target>

<spring.version>5.0.2.RELEASE</spring.version>
</properties> <dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.10</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.10</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.10</version>
</dependency>
</dependencies> <build>
<finalName>springmvc02</finalName>
<pluginManagement>
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>

<configuration>
<source>${maven.compiler.source}</source>
<target>${maven.compiler.target}</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>

2、请求页面

<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2020/2/27
Time: 19:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#btn").click(function() {
$.ajax({
url:"test",
type:"post",
//请求数据类型
contentType:"application/json;charset=UTF-8",
//返回数据类型
dataType:"json",
//注意json格式字符串的写法
data:'{"name":"刘阳","age":28}',
success:function(data) {
console.info(data);
alert(data.name);
alert(data.age);
}
});
});
});
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

3、处理方法

/**
* @ResponseBody 将返回值以json格式返回到页面
* @RequestBody 自动将RequestBody内容映射到User对象
* @ResponseBody和@RequestBody需要如下jar包的支持
* jackson-core
* jackson-databind
* jackson-annotations
*/
@RequestMapping("/test")
@ResponseBody
public User test1(@RequestBody User u) {
System.out.println(u);
u.setAge(100);
System.out.println(u);
return u;
}

4、总结

4.1、注意ajax请求data的json格式

4.2、处理方法中需使用@RequestBody注解将请求体映射到User对象

4.3、在处理方法上加上@ResponseBody注解将返回值以json格式响应到页面

4.4、@RequestBody和@ResponseBody注解需要jackson-core、jackson-databind、jackson-annotations jar包的支持