SpringMVC 接收AJAX請求及文件上傳教程（四）

在前端引入 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方式。

基於傳統方式的文件上傳

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 方式的文件上傳

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. 測試效果如下：

四、跨服務器文件上傳

在實際開發中，我們會有很多處理不同功能的服務器。例如：
應用服務器：負責部署我們的應用
數據庫服務器：運行我們的數據庫
緩存和消息服務器：負責處理大併發訪問的緩存和消息
文件服務器：負責存儲用戶上傳文件的服務器。

①準備一個 tomcat 服務器，用於存放圖片的 web 工程

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

如有不當之處請多多指教，如對你有所幫助，請留言或點贊予以支持，謝謝！

SpringMVC 接收AJAX請求及文件上傳教程（四）

一、通過ajax 發送請求實現

三、文件上傳

四、跨服務器文件上傳

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

Arthas 的安裝使用教程

SpringBoot 整合Redis，Redis工具類

spring整合log4j報錯升級到log4j2 教程

Mysql 啓動報錯 The server quit without updating PID file（/var/run/mysqld/mysqld.id)

Spring MVC 常用註解教程（三）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

SpringMVC 接收AJAX請求及文件上傳教程（四）

一、通過ajax 發送請求實現

三、文件上傳

四、 跨服務器文件上傳

四、跨服務器文件上傳