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?pwd4uuj 提取码: 4uuj2夸克网盘我用夸克网盘给你分享了「demo12(SpringMVC数据绑定和响应).zip」点击链接或复制整段内容打开「夸克APP」即可获取。/e26a3b5tkg链接https://pan.quark.cn/s/45b4cbbd15e8?pwd1Xcf提取码1Xcf1.创建项目打开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 核心类--dependencygroupIdorg.springframework/groupIdartifactIdspring-context/artifactIdversion5.2.8.RELEASE/version/dependency!--Spring MVC--dependencygroupIdorg.springframework/groupIdartifactIdspring-webmvc/artifactIdversion5.2.8.RELEASE/version/dependency!-- servlet --dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!--JSP--dependencygroupIdjavax.servlet.jsp/groupIdartifactIdjsp-api/artifactIdversion2.1/versionscopeprovided/scope/dependency!--Jackson转换核心包依赖--dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-core/artifactIdversion2.9.2/version/dependency!--Jackson转换的数据绑定包依赖--dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactIdversion2.9.2/version/dependency!--Jackson JSON转换注解包--dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-annotations/artifactIdversion2.9.0/version/dependency/dependencies!--构建--build!--设置插件--plugins!--具体的插件配置--plugingroupIdorg.apache.tomcat.maven/groupIdartifactIdtomcat7-maven-plugin/artifactIdconfigurationport8080/portpath/demo12/path/configuration/plugin/plugins/build引入依赖以后右上角刷新一下maven将相关依赖引入。或者点击右面的maven插件然后点击下面这两个,刷新一下maven3.配置前端控制器打开web.xml文件修改里面的内容?xml version1.0 encodingUTF-8?web-appxmlnshttp://java.sun.com/xml/ns/javaeexmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsdversion3.0!-- 配置Spring MVC的前端控制器 --servletservlet-nameDispatcherServlet/servlet-nameservlet-classorg.springframework.web.servlet.DispatcherServlet/servlet-class!-- 配置初始化参数用于读取Spring MVC的配置文件 --init-paramparam-namecontextConfigLocation/param-nameparam-valueclasspath:spring-mvc.xml/param-value/init-param!-- 应用加载时创建--load-on-startup1/load-on-startup/servletservlet-mappingservlet-nameDispatcherServlet/servlet-nameurl-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 version1.0 encodingUTF-8?beansxmlnshttp://www.springframework.org/schema/beansxmlns:contexthttp://www.springframework.org/schema/contextxmlns:mvchttp://www.springframework.org/schema/mvcxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://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-packagecom.itheima.controller/!-- 配置视图解析器 --beanclassorg.springframework.web.servlet.view.InternalResourceViewResolverpropertynameprefixvalue/WEB-INF/pages//propertynamesuffixvalue.jsp//beanmvc:annotation-driven/!--配置静态资源的访问映射此配置中的文件将不被前端控制器拦截 --mvc:resourcesmapping/js/**location/js///beans注意这个地方base-package后面的爆红是正常的因为项目还没有创建相关的文件夹5.创建实体类POJO我们需要在java目录下创建一个路径为com.itheima.pojo的文件夹这里的文件夹名为com.itheima.pojo继续右击pojo文件夹选择“新建—Java类”类名写ProductProduct类参考代码如下packagecom.itheima.pojo;publicclassProduct{privateStringproId;//商品idprivateStringproName;//商品名称publicStringgetProId(){returnproId;}publicvoidsetProId(StringproId){this.proIdproId;}publicStringgetProName(){returnproName;}publicvoidsetProName(StringproName){this.proNameproName;}}此时项目代码参考如下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,methodRequestMethod.POST)publicvoidgetProduct(RequestBodyProductproduct){StringproIdproduct.getProId();StringproNameproduct.getProName();System.out.println(获取到了Id为proId名称为proName的商品);}/** * 获取多个商品信息 */RequestMapping(value/getProductList,methodRequestMethod.POST)publicvoidgetProductList(RequestBodyListProductproducts){for(Productproduct:products){StringproIdproduct.getProId();StringproNameproduct.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?pwdv8je 提取码: v8je2夸克网盘我用夸克网盘给你分享了「jquery-3.6.0.js」点击链接或复制整段内容打开「夸克APP」即可获取。/6e983b5tKp链接https://pan.quark.cn/s/e241ffd3947d?pwdhjDg提取码hjDg如果使用cdn方式引入则不需要下载jquery如果使用本地js,则安装下面的方式配置右击webapp文件夹选择“新建——Directory” (目录)文件夹的名字是js把下载的jquery-3.6.0.js文件放入到这个文件夹中8.创建视图右击webapp文件夹选择“新建—JSP/JSPX页面”这里文件的名字输入“product”如果你上一步选择的是“文件”那么这里的名字是“product.jsp”product.jsp的参考代码如下% pagelanguagejavacontentTypetext/html; charsetUTF-8pageEncodingUTF-8%htmlheadtitle异步提交商品/title%--本地引入方式--%scriptsrcjs/jquery-3.6.0.js/script%--cdn引入方式--%scriptsrchttps://code.jquery.com/jquery-3.6.0.min.js/script/headbodyformidproductstableborder1trth商品id/thth商品名称/thth提交/th/trtrtdinputnameproIdvalue1idproIdtypetext/tdtdinputnameproNamevalue三文鱼idproNametypetext/tdtdinputtypebuttonvalue提交单个商品onclicksumbmitProduct()/td/trtrtdinputnameproIdvalue2idproId2typetext/tdtdinputnameproNamevalue红牛idproName2typetext/tdtdinputtypebuttonvalue提交多个商品onclicksubmitProducts()/td/tr/table/formscripttypetext/javascriptfunctionsumbmitProduct(){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;charsetUTF-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;charsetUTF-8, dataType:json, success:function(response){alert(response);}});}/script/body/html9.运行效果本项目使用tomcat插件运行双击tomcat7:run浏览器访问默认地址为 localhost:8080/demo12/我们访问我们的jsp文件http://localhost:8080/demo12/product.jsp测试效果如下