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.创建项目

打开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-app xmlns="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"?>
<beans xmlns="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-scan base-package="com.itheima.controller"/>
    <!-- 配置视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    <mvc:annotation-driven />
    <!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
    <mvc:resources mapping="/js/**" location="/js/" />
</beans>

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

5.创建实体类（POJO）

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

此图像的alt属性为空；文件名为2025101614_h63h.png

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

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

类名写Product

Product类参考代码如下：

package com.itheima.pojo;

public class Product {
    private String proId;        //商品id
    private String proName;        //商品名称
    public String getProId() {return proId;}
    public void setProId(String proId) {
        this.proId = proId;
    }
    public String getProName() {
        return proName;
    }
    public void setProName(String proName) {
        this.proName = proName;
    }
}

此时项目代码参考如下：

6.创建处理器(Controller层)

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

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

包名写：com.itheima.controller

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

类名为ProductController

参考代码如下：

package com.itheima.controller;

import com.itheima.pojo.Product;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

@Controller
public class ProductController {
    /**
     * 获取单个商品信息
     */
    @RequestMapping(value = "/getProduct",method = RequestMethod.POST)
    public void getProduct(@RequestBody Product product) {
        String proId = product.getProId();
        String proName = product.getProName();
        System.out.println("获取到了Id为" + proId + "名称为" + proName + "的商品");
    }
    /**
     * 获取多个商品信息
     */
    @RequestMapping(value = "/getProductList",method = RequestMethod.POST)
    public void getProductList(@RequestBody List<Product> products) {
        for (Product product : products) {
            String proId = product.getProId();
            String proName = product.getProName();
            System.out.println("获取到了Id为" + proId + "名称为" +
                    proName + "的商品");
        }
    }
}

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

7.添加jquery
因为项目需要js,这里需要引入js,先下载jquery
下载地址：
官网：https://jquery.com/download/
本文使用jquery版本是3.6.0版本
其他下载地址方式(访问密码: 7381)：
https://url47.ctfile.com/f/64055047-8453041158-a52204?p=7381 

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

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

文件夹的名字是js

把下载的jquery-3.6.0.js文件放入到这个文件夹中
8.创建视图

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

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

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

product.jsp的参考代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head><title>异步提交商品</title>
    <%--本地引入方式--%>
    <script src="js/jquery-3.6.0.js"></script>
    <%--cdn引入方式--%>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="products">
    <table border="1">
        <tr>
            <th>商品id</th>
            <th>商品名称</th>
            <th>提交</th>
        </tr>
        <tr>
            <td>
                <input name="proId" value="1" id="proId" type="text">
            </td>
            <td><input name="proName" value="三文鱼"
                       id="proName" type="text"></td>
            <td><input type="button" value="提交单个商品"
                       onclick="sumbmitProduct()"></td>
        </tr>
        <tr>
            <td><input name="proId" value="2" id="proId2"
                       type="text"></td>
            <td><input name="proName" value="红牛"
                       id="proName2" type="text"></td>
            <td><input type="button" value="提交多个商品"
                       onclick="submitProducts()"></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    function sumbmitProduct() {
        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);
            }
        });
    }

    function submitProducts() {
        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

测试效果如下：

本文源代码下载地址：(访问密码: 7381)

https://url47.ctfile.com/f/64055047-8453059892-7dde4b?p=7381

Post Views: 15

Related posts:

  1. IDEA(maven)创建springMVC项目(3)——数据遍历与返回json数据
  2. IDEA(maven)创建springMVC项目(2)——配置信息、创建基础页面
  3. IDEA(maven)创建springMVC项目(4)——传参
  4. springMVC+Quartz实现定时任务(2)—配置文件详解
  5. Spring 最常用的 7 大类注解
  6. IDEA(2020版)使用JSP技术将页面转发到用户登录页面
分类： java
标签：

相关文章

java

IDEA 2024版本创建maven项目的方式有哪些

不同版本的IDEA创建maven项目的方式大同小异，本文介绍两种方式创 阅读更多…

java

IDEA实现Srping入门程序

本文主要实现本文主要实现《Java EE企业级应用开发教程（Sprin 阅读更多…

java

微服务Token鉴权的7种方案

1.为什么必须做Token鉴权？ 传统Session的致命缺陷： 多个 阅读更多…