1. 程式人生 > >ajax提交form表單,使用FormData。JQuery3.2

ajax提交form表單,使用FormData。JQuery3.2

FormData這種用ajax提交form的方式在老版的JQ中是不行,我使用的是3.2版本,程式碼如下

<form id="formTest" action="ajaxTe" method="post" enctype="multipart/form-data">
        <input id="id" name="id" placeholder="id">
        <input id="name" name="name" placeholder="name"><br><br>
        <input id="age"
name="age" placeholder="age">
true:<input id="state" name="state" type="radio" value="true"> false:<input id="state2" name="state" type="radio" value="false"><br><br> <input id="file" name="file" type="file"><br><br> <!-- <input type="submit" value="form提交"> -->
</form> <input id="ajaxbut" type="button" value="ajaxForm">

使用FormData方式,檔案可以用request.getParts()獲得到,這是servlet3.0的新特性.(欄位引數在request.getParameter(“xx”)可以獲得到)
Collection< Part > prats = req.getParts();

<script type="text/javascript">
$("#ajaxbut").click(function(){
    //這裡為啥是$("#formTest")[0]呢,因為用JQ獲得的物件轉DOM就是用這個方式
//如果用 document.getElementById("formTest")就不用這樣 //意思就是jquery物件再[0]一下是取其相對應的Dom物件 //即$("#formTest")[0] = document.getElementById("formTest") var form = new FormData($("#formTest")[0]); $.ajax({ url:"ajaxTe", type:"POST", data:form, dataType:'json', //返回的資料格式:json/xml/html/script/jsonp/text processData:false, contentType:false, success:function(data){ $("#sysout").append("<lable>"+"id--" + data.id + ", name--" + data.name + ", age--" + data.age + ", state--" + data.state +"</lable><br>"); }, error:function(data){ alert("錯誤!!"); } }); })
</script>

java後臺是個簡單的servlet

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doPostdoPost");
        User user = new User();
        try {
            //用了BeanUtils工具,是使用反射的方式把傳回來的form表單欄位和實體類對映
            BeanUtils.populate(user, req.getParameterMap());
            //這個form表單裡有一個檔案,要做的是把檔案上傳後的檔名賦給user的某個欄位
            **user.setFileName(req.getParts());**
        } catch (IllegalAccessException | InvocationTargetException e) {
            e.printStackTrace();
        }
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(user);
        resp.getWriter().print(s);
    }

上傳步驟寫在了User物件裡的某個set方法中,這樣就完成了ajax提交form表單帶檔案.


public class User {
    private String id;
    private String name;
    private int age;
    private boolean state;
    private String fileName;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public boolean isState() {
        return state;
    }

    public void setState(boolean state) {
        this.state = state;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(Collection<Part> prats) {
        this.fileName = "";
        try {
            for (Part part : prats) {
                ApplicationPart ap = (ApplicationPart) part;
                String suffix = ap.getSubmittedFileName();
                if (suffix != null && !"".equals(suffix)) {
                    suffix = suffix.substring(suffix.lastIndexOf("."));
                    String str = "upload/" + System.currentTimeMillis() + suffix;
                    part.write(StaticString.UPLOADPATH + str);
                    this.fileName += str + ",";
                }
            }
            this.fileName = this.fileName.substring(0, this.fileName.length() - 1);
        } catch (Exception e) {
            // TODO: handle exception
        }
    }

}