欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SpringMVC 接收AJAX请求及文件上传教程(四)

程序员文章站 2022-07-12 20:18:14
...

延续上一篇博客:Spring MVC 常用注解教程 (三)

在前端引入 Jquery 插件,可参考:http://www.jq22.com/daima5

SpringMVC 接收AJAX请求及文件上传教程(四) 一、通过ajax 发送请求实现

1. 在html 中实现 ajax 请求,实现代码如下:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入jquery :http://www.jq22.com/jquery-info122-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $(".but").click(function () {
                $.ajax({
                    // 请求类型
                    type:"post",
                    // 请求地址
                    url: "/ajaxTest",
                    // 内容编码类型
                    contentType:"application/json;charset=UTF-8",
                    //发送到服务器的数据
                    data:'{"userName":"姚明","passWord":"123","age":"90"}',
                    //服务器返回的数据类型
                    dataType:"json",
                    success: function (data) {
                       
                    }
                });
            });
        });

    </script>

</head>

<body>
<button class="but">ajax请求</button>
</body>

2. 控制层代码实现

    @RequestMapping("/ajaxTest")
    public String ajaxTest(@RequestBody String body) {
        System.out.println("通过ajax请求 :"+body);
        return "success";
    }

3.执行结果

通过ajax请求 :{"userName":"姚明","passWord":"123","age":"90"}

二、 通过Ajax请求 并返回请求数据

实现ajax 请求时提交参数,成功后返回数据,前端实现代码如下:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入jquery :http://www.jq22.com/jquery-info122-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $(".but").click(function () {
                $.ajax({
                    // 请求类型
                    type:"post",
                    // 请求地址
                    url: "/ajaxTestResult",
                    // 内容编码类型
                    contentType:"application/json;charset=UTF-8",
                    //发送到服务器的数据
                    data:'{"userName":"姚明","passWord":"123","age":"90"}',
                    //服务器返回的数据类型
                    dataType:"json",
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });
            });
        });

    </script>

2. 后端代码实现:

通过注解 @ResponseBody ,实现把返回对象转化为JSON。

注:需要一个User 实例。

    /**
     * @ResponseBody :注解把对象转化为JSON格式
     * @Description: 通过Ajax 查询并返回数据
     * @Author: 
     * @Date: 2020/4/4 11:17
     **/
    @RequestMapping("/ajaxTestResult")
    public @ResponseBody User ajaxTest(@RequestBody User user) {
        System.out.println("通过ajax请求 :"+user);
        // 模拟查询数据
        user.setUserName("康熙");
        user.setPassWord("123456");
        user.setAge("69");
        return user;
    }

3. 返回结果如下:

SpringMVC 接收AJAX请求及文件上传教程(四)

三、文件上传

本篇博客介绍两种文件上传方法:基于传统方式上传和基于Springmvc方式。

  • 基于传统方式的文件上传

1. 使用基于传统方式的文件上传, 引入 Maven依赖


        <!--  commons-fileupload 文件上传依赖-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <!--  commons-io 文件上传依赖 -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

2. 在前端实现获取文件的form表单,代码如下:

<form action="/uploadfiles" method="post" enctype="multipart/form-data">
    选择上传文件: <input type="file" name="选择文件"><br>
    上传文件:<input type="submit" value="上传">
</form>

注意:文件上传类型:enctype="multipart/form-data"

3.后端代码实现:

/**
     * @Description: 文件上传 传统方式
     * @Author:  
     * @Date: 2020/4/4 12:53
     **/
    @RequestMapping("/uploadfiles")
    public String uploadfiles(HttpServletRequest request, HttpServletResponse response) {
        // 指定文件上传的位置
        String path = request.getSession().getServletContext().getRealPath("/uploads/");
        //判断该路径是否存在
        File file = new File(path);
        if (!file.exists()) {
            // 不存在就创建路径
            file.mkdirs();
        }
        try {
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
            ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
            //解析request对象,获取文件上传项
            List<FileItem> fileItems = servletFileUpload.parseRequest(request);
            //判断当前的item对象是否为上传文件项
            for (FileItem items:fileItems){
                if (items.isFormField()){
                    //说明是普通表单项
                }else {
                    //说明上传文件项 ,获取上传文件的名称
                    String fileName = items.getName();
                    //把文件名称设置成唯一值uuid
                    String uuid=UUID.randomUUID().toString().replace("-","");
                    fileName=uuid+"_"+fileName;
                    //完成上传文件
                    items.write(new File(path,fileName));
                    // 删除临时文件
                    items.delete();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        System.out.println("获取上传的文件:" + request);
        return "success";
    }

4. 执行效果如下:

SpringMVC 接收AJAX请求及文件上传教程(四)

  • 基于SpringMVC 方式的文件上传

1. 配置文件解析器对象

在springmvc.xml 文件中配置文件解析器

    <!-- 配置文件解析器,id值必须是 multipartResolver -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"></property>
    </bean>

2. 在前端实现获取文件的form表单,代码如下:

<form action="/uploadfiles/sspringmvc" method="post" enctype="multipart/form-data">
    选择上传文件: <input type="file" name="upload"><br>
    上传文件:<input type="submit" value="上传">
</form>

 注意:<input type="file" name="upload"> 中的 name的值 必须和 后端参数保持一致

3. 后端代码实现

注:  控制层方法中 MultipartFile upload 的形参和 name 保持一致。

/**
     * @Description: 文件上传 SpringMVC方式
     * @Author: 
     * @Date: 2020/4/4 12:53
     **/
    @RequestMapping("/uploadfiles/sspringmvc")
    public String uploadfiles(HttpServletRequest request, MultipartFile upload) {
        System.out.println("springmvc 方式 :" + upload);
        // 指定文件上传的位置
        String path = request.getSession().getServletContext().getRealPath("/uploads/");
        //判断该路径是否存在
        File file = new File(path);
        if (!file.exists()) {
            // 不存在就创建路径
            file.mkdirs();
        }
        String fileName = upload.getOriginalFilename();
        //把文件名称设置成唯一值uuid
        String uuid=UUID.randomUUID().toString().replace("-","");
        fileName=uuid+"_"+fileName;
        try {
            upload.transferTo(new File(path,fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "success";
    }

4. 测试效果如下:

SpringMVC 接收AJAX请求及文件上传教程(四)

四、 跨服务器文件上传

在实际开发中,我们会有很多处理不同功能的服务器。例如:
应用服务器:负责部署我们的应用
数据库服务器:运行我们的数据库
缓存和消息服务器:负责处理大并发访问的缓存和消息
文件服务器:负责存储用户上传文件的服务器。

SpringMVC 接收AJAX请求及文件上传教程(四)

①准备一个 tomcat  服务器 ,用于存放图片的 web  工程

SpringMVC 接收AJAX请求及文件上传教程(四)

2.  在应用服务器中添加jar 包

        <!--  跨服务器方式的文件上传需要依赖 jersey-core 和jersey-client jar包 -->
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-core</artifactId>
            <version>1.19.4</version>
        </dependency>
        <!--  jersey-client -->
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-client</artifactId>
            <version>1.19.4</version>
        </dependency>

3. view层页面代码

<form action="/crossServer/uploadfiles" method="post" enctype="multipart/form-data">
    选择上传文件: <input type="file" name="upload"><br>
    上传文件:<input type="submit" value="上传">
</form>

4. controller层页面代码

/**
     * @Description: 文件上传 跨服务器文件上传
     * @Author:  
     * @Date: 2020/4/4 12:53
     **/
    @RequestMapping("/crossServer/uploadfiles")
    public String crossServerUploadfiles(MultipartFile upload) {
        System.out.println("跨服务器文件上传 方式 :" + upload);
        // 指定文件上传的位置
        String path = "http://localhost:9090/uploads/";

        String fileName = upload.getOriginalFilename();
        //把文件名称设置成唯一值uuid
        String uuid=UUID.randomUUID().toString().replace("-","");
        fileName=uuid+"_"+fileName;
        path = path + fileName;
        Client client = Client.create();
        WebResource webResource = client.resource(path);
        try {
            webResource.put(upload.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "success";
    }

如有不当之处请多多指教,如对你有所帮助,请留言或点赞予以支持,谢谢!