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

}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值