Struts2与ajax，ajax上传

忘是亡心i 2022-12-22 06:16 130阅读 0赞

### 一、使用ajax提交到Struts ###

（1）编写页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
    
    <form id="book-form">
        编号：<input type="text" name="book.bookId">
        书名：<input type="text" name="book.bookName">
        <button id="form-btn" type="button">使用ajax携带表单参数访问action</button>
    </form>
    
    <script src="qinghua/layui/jquery-3.3.1.js"></script>
    <script>
        $("#form-btn").click(function () {
            $.ajax({
                type:"post",
                url:"AjaxAction/addBook",
                data:$("#book-form").serialize(),
                dataType:"json",
                success:function (data) {
                    console.log(data);
                }
            });
        });
    </script>
    </body>
    </html>

该页面有一个表单，填写图书的编号和书名。然后给提交按钮绑定了一个点击事件。点击按钮时触发ajax，把表单的内容提交到了Action中。并且设置了成功时返回Action给ajax的类型为json类型。

（2）编写Action类

package com.buba.action;
    
    
    import com.alibaba.fastjson.JSONObject;
    import com.buba.pojo.Book;
    import com.opensymphony.xwork2.ActionSupport;
    import org.apache.struts2.ServletActionContext;
    import org.apache.struts2.convention.annotation.Action;
    
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * ajax提交表单
     */
    @Action("/AjaxAction")
    public class AjaxAction extends ActionSupport {
        private Book book;
    
        /**
         * 表单提交方法
         */
        @Action("/addBook")
        public void addBook() {
            System.out.println("表单的信息：" + book);
            HttpServletResponse response = ServletActionContext.getResponse();
            // 处理中文乱码
            response.setHeader("content-type", "text/html;charset=UTF-8");
            // 向页面返回的json数据信息
            JSONObject json = new JSONObject();
            json.put("no1", "悯农");
            json.put("no2", "静夜思");
            json.put("no3", "枫桥夜泊");
            try {
                response.getWriter().write(json.toJSONString());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        public Book getBook() {
            return book;
        }
    
        public void setBook(Book book) {
            this.book = book;
        }
    }

这个Action类使用的是注解方式配置。这样可以省略在struts.xml中配置信息。

在表单提交的方法中获取页面表单信息，在控制台上打印。然后创建一个json对象。添加一些数据后使用响应流返回给ajax。

（3）运行测试

输入表单提交

![20201118140717254.png][]

后台成功获取到表单信息并打印

![20201118140834710.png][]

在浏览器控制台中可以看到Action返回的json数据

![20201118140943288.png][]

### 二、使用ajax向struts上传文件 ###

（1）编写页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
    
    <form id="import-form" method="post" enctype="multipart/form-data">
        excel文件：<input type="file" name="uploadExcel">
        <button type="button" id="import-btn">立即导入</button>
    </form>
    
    <script src="qinghua/layui/jquery-3.3.1.js"></script>
    <script>
        // 点击上传Excel按钮触发
        $("#import-btn").click(function () {
            // FormData对象 ajax异步上传时使用
            $.ajax({
                url: "AjaxUploadAction/upExcelFile",
                data: new FormData($("#import-form")[0]),
                type: "POST",
                // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
                processData: false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                success: function (count) {
                }
            });
        });
    </script>
    </body>
    </html>

如果使用表单提交必须设置表单属性enctype="multipart/form-data"。给提交按钮绑定一个点击事件，触发ajax提交。提交的表单数据必须用FormData对象进行包装。并且设置 processData: false和contentType: false这两个属性。

（2）编写Action类

package com.buba.action;
    
    import org.apache.struts2.convention.annotation.Action;
    import org.apache.struts2.convention.annotation.InterceptorRef;
    
    import java.io.File;
    
    /**
     * 通过ajax上传文件
     */
    @Action(value = "/AjaxUploadAction", interceptorRefs = {
            @InterceptorRef(value = "defaultStack", params = {
                    "fileUpload.maximumSize", "500000000", "fileUpload.allowedTypes", "application/vnd.ms-excel",
                    "fileUpload.allowedExtensions", ".xlsx,.xls"})
    })
    public class AjaxUploadAction {
        // 得到上传的文件
        private File uploadExcel;
        // 得到文件的类型
        private String uploadExcelContentType;
        // 得到文件的名称
        private String uploadExcelFileName;
        /**
         * 处理上传方法
         */
        @Action("/upExcelFile")
        public void upExcelFile(){
            System.out.println("得到上传的文件: "+uploadExcel);
            System.out.println("得到文件的类型: "+uploadExcelContentType);
            System.out.println("得到文件的名称: "+uploadExcelFileName);
        }
    
        public File getUploadExcel() {
            return uploadExcel;
        }
    
        public void setUploadExcel(File uploadExcel) {
            this.uploadExcel = uploadExcel;
        }
    
        public String getUploadExcelContentType() {
            return uploadExcelContentType;
        }
    
        public void setUploadExcelContentType(String uploadExcelContentType) {
            this.uploadExcelContentType = uploadExcelContentType;
        }
    
        public String getUploadExcelFileName() {
            return uploadExcelFileName;
        }
    
        public void setUploadExcelFileName(String uploadExcelFileName) {
            this.uploadExcelFileName = uploadExcelFileName;
        }
    }

上传文件的Action中需要设置上传的信息。分别为文件大小、文件类型、文件后缀。

附加：**contentType****类型设置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70][]

（3）运行测试

选择一个excel表格上传：

![20201118144531676.png][]

控制台上打印的上传文件

![20201118144844234.png][]

[20201118140717254.png]: /images/20221120/849ea131ff5047b884e948dab8f239a7.png
[20201118140834710.png]: https://img-blog.csdnimg.cn/20201118140834710.png
[20201118140943288.png]: https://img-blog.csdnimg.cn/20201118140943288.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201118145448611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx,size_16,color_FFFFFF,t_70
[20201118144531676.png]: https://img-blog.csdnimg.cn/20201118144531676.png
[20201118144844234.png]: https://img-blog.csdnimg.cn/20201118144844234.png