springMVC异步调用

最新推荐文章于 2024-04-29 18:42:59 发布

Z_海瑞_Z

最新推荐文章于 2024-04-29 18:42:59 发布

阅读量228

点赞数

分类专栏：笔记文章标签： java spring mvc

ZHRZ

本文链接：https://blog.csdn.net/qq_20286065/article/details/106965916

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

需要的依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>springmvc021</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
    <!--jackson-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.0</version>
    </dependency>
    <!-- servlet3.1规范的坐标 -->
    <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.0</version>
      <scope>provided</scope>
    </dependency>
    <!--spring的坐标-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>
    <!--spring web的坐标-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>
    <!--springmvc的坐标-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>
    <!--Lombok-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.16.6</version>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <!--jdk编译插件-->
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
          <encoding>utf-8</encoding>
        </configuration>
      </plugin>

      <!--tomcat插件-->
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <!-- tomcat7的插件， 不同tomcat版本这个也不一样 -->
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.1</version>
        <configuration>
          <!-- 通过maven tomcat7:run运行项目时，访问项目的端口号 -->
          <port>80</port>
          <!-- 项目虚拟路径  如果配置的aa， 则访问路径为localhost:8080/aa-->
          <path>/</path>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

异步调用

发送异步请求

前端index.jsp页面

两个注意事项
1. 前端需要通过contentType告诉后端是JSON数据
2. 前端需要把数据转换成字符串再发送

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <button id="btn1">点击发送请求</button>

    <script>
        $(function () {
            $("#btn1").on('click',function () {
                var users = [
                    {
                        name:"jack",
                        age:34
                    },
                    {
                        name:"tom",
                        age:32
                    },{
                        name:"张三",
                        age:3
                    }


                ];
                $.ajax({
                    type:"post",
                    url:"/user/ajax",
                    data:JSON.stringify(users),//把对象转字符串
                    contentType:"application/json",//用json，text后端封装复杂数据会失败报415，自行测试
                    success:function (data) {
                        console.log(data)
                    }
                });
            });
        });
    </script>
</body>
</html>

java代码

package cn.itcast.controller;

import cn.itcast.domain.User;
import org.springframework.format.annotation.DateTimeFormat;
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.ResponseBody;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/ajax")
    @ResponseBody
    public Map<Object, Object> ajax(@RequestBody List<User> users){
        System.out.println(users);


        //不要直接返回字符串，返回对象，测试前端success接收到的是字符串还是对象
        HashMap<Object, Object> map = new HashMap<>();
        map.put("status","success");
        return map;
    }
}

接受异步请求参数

 名称： @RequestBody
 类型：形参注解
 位置：处理器类中的方法形参前方
 作用：将异步提交数据组织成标准请求参数格式，并赋值给形参
 范例：

@RequestMapping("/ajaxController")
public String ajaxController(@RequestBody String message){
    System.out.println(message);
    return "page.jsp";
}

注解添加到Pojo参数前方时，封装的异步提交数据按照Pojo的属性格式进行关系映射

注解添加到集合参数前方时，封装的异步提交数据按照集合的存储结构进行关系映射

@RequestMapping("/ajaxPojoToController")
//如果处理参数是POJO，且页面发送的请求数据格式与POJO中的属性对应，@RequestBody注解可以自动映射对应请求数据到POJO中
//注意：POJO中的属性如果请求数据中没有，属性值为null，POJO中没有的属性如果请求数据中有，不进行映射
public String  ajaxPojoToController(@RequestBody User user){
    System.out.println("controller pojo :"+user);
    return "page.jsp";
}

@RequestMapping("/ajaxListToController")
//如果处理参数是List集合且封装了POJO，且页面发送的数据是JSON格式的对象数组，数据将自动映射到集合参数中
public String  ajaxListToController(@RequestBody List<User> userList){
    System.out.println("controller list :"+userList);
    return "page.jsp";
}

异步请求接受响应数据

方法返回值为Pojo时，自动封装数据成json对象数据

	@RequestMapping("/ajaxReturnJson")
	@ResponseBody
	public User ajaxReturnJson(){
	    System.out.println("controller return json pojo...");
	    User user = new User();
	    user.setName("Jockme");
	    user.setAge(40);
	    return user;
	}  
	```

* 方法返回值为List时，自动封装数据成json对象数组数据  
	```java
@RequestMapping("/ajaxReturnJsonList")
@ResponseBody
//基于jackon技术，使用@ResponseBody注解可以将返回的保存POJO对象的集合转成json数组格式数据
public List ajaxReturnJsonList(){
    System.out.println("controller return json list...");
    User user1 = new User();
    user1.setName("Tom");
    user1.setAge(3);

    User user2 = new User();
    user2.setName("Jerry");
    user2.setAge(5);

    ArrayList al = new ArrayList();
    al.add(user1);
    al.add(user2);

    return al;
}

异步请求-跨域访问

跨域访问介绍

当通过域名A下的操作访问域名B下的资源时，称为跨域访问
跨域访问时，会出现无法访问的现象

跨域环境搭建

为当前主机添加备用域名
- 修改windows安装目录中的host文件
- 格式： ip 域名
动态刷新DNS
- 命令： ipconfig /displaydns
- 命令： ipconfig /flushdns

跨域访问支持

 名称： @CrossOrigin
 类型：方法注解、类注解
 位置：处理器类中的方法上方或类上方
 作用：设置当前处理器方法/处理器类中所有方法支持跨域访问
 范例：

@RequestMapping("/cross")
@ResponseBody
//使用@CrossOrigin开启跨域访问
//标注在处理器方法上方表示该方法支持跨域访问
//标注在处理器类上方表示该处理器类中的所有处理器方法均支持跨域访问
@CrossOrigin
public User cross(HttpServletRequest request){
    System.out.println("controller cross..."+request.getRequestURL());
    User user = new User();
    user.setName("Jockme");
    user.setAge(39);
    return user;
}

Z_海瑞_Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springMVC异步调用

异步调用发送异步请求（回顾）<a href="javascript:void(0);" id="testAjax">访问controller</a><script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(function(){ $("#testAjax").click(fun
复制链接

扫一扫

专栏目录