SpringMVC第五讲：SpringMVC实现AJAX及JSON格式转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了SpringMVC第五讲：SpringMVC实现AJAX及JSON格式转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

十、SpringMVC实现AJAX及JSON转换器

10、1Spring MVC实现AJAX

AJAX异步提交是页面与程序交互的重要手段之一，在SpringMVC中，也支持页面向Controller控制器发送异步请求。页面发送异步请求时，常使用JSON格式数据进行数据传输。但是当页面需要向Controller控制器发送异步请求时，需要注意以下几个问题：

SpringMVC的静态资源：在SpringMVC中，需要在SpringMVC配置文件中设置放行静态资源
SpringMVC接收请求时的格式及配置
SpringMVC处理响应时的方式

10、2JSON格式转换

10、2、1SpringMVC配置文件中设置放行静态资源

引入依赖资源

<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-core</artifactId>
  <version>2.12.1</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.12.1</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-annotations</artifactId>
  <version>2.12.1</version>
</dependency>

<!--DispatcherServlet请求映射配置为 /，springMVC将捕获WEB容器的所有请求，包括静态资源的请求，SpringMVC会将他们当成一个普通请求处理，因找不到对应处理器将导致错误。此配置它会对进入 DispatcherServlet 的请求进行筛查，如果发现是没有经过映射的请求，就将该请求交由 WEB 应用服务器默认的 Servlet 处理，如果不是静态资源的请求，才由DispatcherServlet 继续处理-->
<mvc:default-servlet-handler/>
<!--配置资源时还可以使用其他标签对静态资源单独放行-->
<!--
		<mvc:resources mapping="/js/**" location="/js/"/>
    <mvc:resources mapping="/css/**" location="/css/"/>
    <mvc:resources mapping="/img/**" location="/img/"/>
		mapping属性：匹配静态资源全路径，其中“/**”表示文件夹及其子文文件夹下的某个具体文件。
		location属性：该属性用于设置需要访问的本地静态资源文件的路径。
-->
<!--这个标签会帮我们注入很多关键而实用的bean，包括RequestMapping映射分发，也是SpringMVC的@Controller分发请求所必需的，并且提供了数据绑定支持-->
<mvc:annotation-driven/>

10、2、2@RequestBody注解

当页面发送AJAX请求时，如果请求的数据格式为JSON格式时，需要在形参上加入@RequestBody注解，@RequestBody注解可以帮助我们实现对数据的绑定

@RequestMapping(value = "/saveCharging",method = RequestMethod.POST)
public Charging saveCharging(@RequestBody Charging charging){
  ModelAndView modelAndView=new ModelAndView();
  chargingService.save(charging);
  //modelAndView.setViewName("redirect:/findAll");
  return charging;
}

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <html>
      <head>
        <title>新增充电桩</title>
        <script src="js/jquery-3.7.0.js"></script>
        <script>
          $(function () {
            $("#btn").click(function () {
              $.ajax({
                url:"/saveCharging",
                type:"POST",
                //传输格式必须是JSON，如果仅以数据传递，则无法封装数据，普通数据根据参数名SpringMVC会自动封装，JSON格式需要配置@RequestBody
                data:JSON.stringify({
                  chargingName:$("#chargingName").val(),
                  chargingAddress:$("#chargingAddress").val(),
                  chargingMax:$("#chargingMax").val(),
                  chargingTypeId:$("#chargingTypeId").val()
                }),
                //传输格式为JSON格式时，需要配置请求内容格式及编码格式
                contentType:"application/json;charset=UTF-8",
                dataType:"JSON",
                success:function (data) {
                  console.log(data);
                }
              });
            });
          });
        </script>
      </head>
      <body>
        充电桩维护人：<input type="text" name="chargingName" id="chargingName">
        充电桩地址：<input type="text" name="chargingAddress" id="chargingAddress">
        充电桩电量：<input type="text" name="chargingMax" id="chargingMax">
        充电桩分类：<select name="chargingTypeId" id="chargingTypeId">
        <c:forEach items="${chargingTypeList}" var="chargingType">
          <option value="${chargingType.chargingTypeId}">${chargingType.chargingTypeName}</option>
        </c:forEach>
        </select>
        <button id="btn">新增</button>
      </body>
    </html>

10、2、3@ResponseBody注解

@ResponseBody注解作用于方法上，用于将Controller控制器方法的返回值，直接作为响应内容响应到浏览器上。文章来源地址https://www.toymoban.com/news/detail-557867.html

@ResponseBody
@RequestMapping(value = "/saveCharging",method = RequestMethod.POST)
public Charging saveCharging(@RequestBody Charging charging){
  ModelAndView modelAndView=new ModelAndView();
  chargingService.save(charging);
  //modelAndView.setViewName("redirect:/findAll");
  return charging;
}