SpringMVC 接收AJAX请求及文件上传教程（四）

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

...

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

一、通过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";
    }

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

上一篇： ajax提交后台如何无法接收json数组对象

下一篇： ajax,post提交全部所有input表单值,php端接收

SpringMVC 接收AJAX请求及文件上传教程（四）

一、通过ajax 发送请求实现

三、文件上传

四、 跨服务器文件上传

SpringMVC 接收AJAX请求及文件上传教程（四）

PHP使用curl模拟post上传及接收文件的方法，_PHP教程

四、跨服务器文件上传