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.coregroupId>
  artifactId>jackson-coreartifactId>
  version>2.12.1version>
dependency>
dependency>
  groupId>com.fasterxml.jackson.coregroupId>
  artifactId>jackson-databindartifactId>
  version>2.12.1version>
dependency>
dependency>
  groupId>com.fasterxml.jackson.coregroupId>
  artifactId>jackson-annotationsartifactId>
  version>2.12.1version>
dependency>

mvc:default-servlet-handler/>



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;
}

  
    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控制器方法的返回值，直接作为响应内容响应到浏览器上。

@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;
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: WasmEdge 邀请你参加 WasmCon: 主题演讲、技术讲座和工作坊

来 WasmCon 找寻 WasmEdge 吧 ： 主题演讲、技术讲座和工作坊，活动多多 备受期待的 WasmCon 技术大会即将于9月6日至8日召开，大会专注于 WebAssembly (Wasm)技术！WasmEdge 社区积极参与其中！我们的维护者和社区…