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

}