Spring MVC数据绑定和响应(JSON数据绑定)

0.前言

本文主要演示Spring MVC项目中的JSON数据绑定操作。

主要演示《Java EE企业级应用开发教程》（第2版）中第12.3.4小节的JSON数据绑定内容。

本文演示工具：

IDEA 2024.1 Ultimate版、maven 3.6.3、JDK 1.8

本文源代码下载地址：

（1）百度网盘：
通过网盘分享的文件：demo12(SpringMVC数据绑定和响应).zip
链接: https://pan.baidu.com/s/1N3zz0dLOWKk0tP6DBkWatA?pwd=4uuj 提取码: 4uuj

（2）夸克网盘
我用夸克网盘给你分享了「demo12(SpringMVC数据绑定和响应).zip」，点击链接或复制整段内容，打开「夸克APP」即可获取。
/_e26a3b5tkg😕
链接：https://pan.quark.cn/s/45b4cbbd15e8?pwd=1Xcf
提取码：1Xcf

1.创建项目

打开IDEA，选择File—>New—>Project

如果是中文版本，是“文件—>新建—>项目”

下面创建项目过程中，我们使用Maven Archetype，类型选择：

maven-archetypr-webapp

项目名称为demo12.3.4，然后点击“创建”

等待一会，就会看到下面的界面。

如果创建失败，大概率是你的maven配置失败。可以参考下面的文章进行配置：

IDEA搭建maven环境 – 每天进步一点点

注意：上面项目的文件夹并没有创建完毕，没有java文件夹。

2.引入依赖

打开项目的pom.xml文件，把依赖文件导入

下面这里只有dependencies和build两个标签，不是所有的pom.xml,注意替换。

<dependencies><!--Spring 核心类--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.8.RELEASE</version></dependency><!--Spring MVC--><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.2.8.RELEASE</version></dependency><!-- servlet --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!--JSP--><dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.1</version><scope>provided</scope></dependency><!--Jackson转换核心包依赖--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.2</version></dependency><!--Jackson转换的数据绑定包依赖--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.2</version></dependency><!--Jackson JSON转换注解包--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0</version></dependency></dependencies><!--构建--><build><!--设置插件--><plugins><!--具体的插件配置--><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8080</port><path>/demo12</path></configuration></plugin></plugins></build>

引入依赖以后，右上角刷新一下maven，将相关依赖引入。

或者点击右面的maven插件

然后点击下面这两个,刷新一下maven

3.配置前端控制器

打开web.xml文件，修改里面的内容

<?xml version="1.0" encoding="UTF-8"?><web-appxmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><!-- 配置Spring MVC的前端控制器 --><servlet><servlet-name>DispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- 配置初始化参数，用于读取Spring MVC的配置文件 --><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring-mvc.xml</param-value></init-param><!-- 应用加载时创建--><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>DispatcherServlet</servlet-name><url-pattern>/</url-pattern></servlet-mapping></web-app>

代码加上后如下图，注意，下图这个地方报红是正确的，因为还没有创建这个spring-mvc.xml文件，所以会爆红。

4.配置处理器映射信息和视图解析器（spring-mvc.xml）

如果项目没有java和resources文件，那么右击main文件夹，

选择New—>Directory文件夹

中文是”新建—>目录”

在弹出来的框中分别选择java和resources文件夹，生成这两个文件夹。

创建完毕后整个项目结构如下：

右击resources文件夹，选择（新建—>XML配置文件—>Srping配置）

如果没有上面这个选项，可以选择“新建—>文件”

文件名称为spring-mvc.xml

文件内容参考代码如下：

<?xml version="1.0" encoding="UTF-8"?><beansxmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"><!-- 配置 Spring MVC 要扫描的包 --><context:component-scanbase-package="com.itheima.controller"/><!-- 配置视图解析器 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><propertyname="prefix"value="/WEB-INF/pages/"/><propertyname="suffix"value=".jsp"/></bean><mvc:annotation-driven/><!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 --><mvc:resourcesmapping="/js/**"location="/js/"/></beans>

注意，这个地方base-package后面的爆红是正常的，因为项目还没有创建相关的文件夹

5.创建实体类（POJO）

我们需要在java目录下创建一个路径为com.itheima.pojo的文件夹

这里的文件夹名为com.itheima.pojo

继续右击pojo文件夹，选择“新建—>Java类”

类名写Product

Product类参考代码如下：

packagecom.itheima.pojo;publicclassProduct{privateStringproId;//商品idprivateStringproName;//商品名称publicStringgetProId(){returnproId;}publicvoidsetProId(StringproId){this.proId=proId;}publicStringgetProName(){returnproName;}publicvoidsetProName(StringproName){this.proName=proName;}}

此时项目代码参考如下：

6.创建处理器(Controller层)

我们需要在java目录下创建一个路径为com.itheima.controller的包，要和上面的base-package对应，这样Spring-MVC才能扫描到。

右击java，选择“新建——>软件包”

包名写：com.itheima.controller

继续右击controller文件夹，选择“新建—>Java类”

类名为ProductController

参考代码如下：

packagecom.itheima.controller;importcom.itheima.pojo.Product;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;importjava.util.List;@ControllerpublicclassProductController{/** * 获取单个商品信息 */@RequestMapping(value="/getProduct",method=RequestMethod.POST)publicvoidgetProduct(@RequestBodyProductproduct){StringproId=product.getProId();StringproName=product.getProName();System.out.println("获取到了Id为"+proId+"名称为"+proName+"的商品");}/** * 获取多个商品信息 */@RequestMapping(value="/getProductList",method=RequestMethod.POST)publicvoidgetProductList(@RequestBodyList<Product>products){for(Productproduct:products){StringproId=product.getProId();StringproName=product.getProName();System.out.println("获取到了Id为"+proId+"名称为"+proName+"的商品");}}}

添加完代码后，项目如下，代码没有爆红，而且你刚才的spring-mvc.xml中不再爆红了。

7.添加jquery

因为项目需要js,这里需要引入js,先下载jquery
下载地址：
官网：https://jquery.com/download/
本文使用jquery版本是3.6.0版本

（1）百度网盘
通过网盘分享的文件：jquery-3.6.0.js
链接: https://pan.baidu.com/s/1owYrcL3bWSHnYEjDsE8-Ng?pwd=v8je 提取码: v8je
（2）夸克网盘：
我用夸克网盘给你分享了「jquery-3.6.0.js」，点击链接或复制整段内容，打开「夸克APP」即可获取。
/_6e983b5tKp😕
链接：https://pan.quark.cn/s/e241ffd3947d?pwd=hjDg
提取码：hjDg

如果使用cdn方式引入，则不需要下载jquery，如果使用本地js,则安装下面的方式配置：

右击webapp文件夹，选择“新建——>Directory” (目录)

文件夹的名字是js

把下载的jquery-3.6.0.js文件放入到这个文件夹中

8.创建视图

右击webapp文件夹，选择“新建—>JSP/JSPX页面”

这里文件的名字输入“product”

如果你上一步选择的是“文件”，那么这里的名字是“product.jsp”

product.jsp的参考代码如下：

<%@ pagelanguage="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><html><head><title>异步提交商品</title><%--本地引入方式--%><scriptsrc="js/jquery-3.6.0.js"></script><%--cdn引入方式--%><scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body><formid="products"><tableborder="1"><tr><th>商品id</th><th>商品名称</th><th>提交</th></tr><tr><td><inputname="proId"value="1"id="proId"type="text"></td><td><inputname="proName"value="三文鱼"id="proName"type="text"></td><td><inputtype="button"value="提交单个商品"onclick="sumbmitProduct()"></td></tr><tr><td><inputname="proId"value="2"id="proId2"type="text"></td><td><inputname="proName"value="红牛"id="proName2"type="text"></td><td><inputtype="button"value="提交多个商品"onclick="submitProducts()"></td></tr></table></form><scripttype="text/javascript">functionsumbmitProduct(){var proId=$("#proId").val();var proName=$("#proName").val();$.ajax({url:"${pageContext.request.contextPath }/getProduct", type:"post", data: JSON.stringify({proId: proId, proName: proName}), contentType:"application/json;charset=UTF-8", dataType:"json", success:function(response){alert(response);}});}functionsubmitProducts(){var pro1={proId:$("#proId").val(), proName:$("#proName").val()}var pro2={proId:$("#proId2").val(), proName:$("#proName2").val()}$.ajax({url:"${pageContext.request.contextPath }/getProductList", type:"post", data: JSON.stringify([pro1, pro2]), contentType:"application/json;charset=UTF-8", dataType:"json", success:function(response){alert(response);}});}</script></body></html>

9.运行效果

本项目使用tomcat插件运行

双击tomcat7:run

浏览器访问默认地址为 localhost:8080/demo12/

我们访问我们的jsp文件

http://localhost:8080/demo12/product.jsp

测试效果如下：