记录一下ajax提交表单的一二知识点

最新推荐文章于 2021-01-30 13:29:20 发布

打死我也不改这个bug

最新推荐文章于 2021-01-30 13:29:20 发布

阅读量131

点赞数 2

分类专栏：后端文章标签： formdata ajax 文件上传

本文链接：https://blog.csdn.net/qq_39425564/article/details/88079813

版权

后端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近看大佬的springboot项目的时候,看到一个有意思的地方.平时我上传文件只用过提交form表单的方式,今天看到了用ajax异步上传文件,使用的事formdata,第一次见,就记录一下.

var data = new FormData(document.querySelector(selectors));这里的selectors可以是元素的id,class,或者标签名;querySelector获取匹配的第一个元素,如果想获取多个,那么请用querySelectorAll()方法替代;然后就初始化了formdata对象;formdata除了这种初始化方式外,还可以通过append()方法进行添加数据,使用方式和java中的StringBuffer.append()方法是一样的使用append方法的时候,value值可以是blob,file和String,如果不是blob和file类型就会转换成String类型;formdata是可以将数据对象编译成键值对的,如果表单的enctype属性设置为multipart/form-data则需使用submit()方法提交.

通过ajax提交数据,这里有个地方需要注意一下:
```
var fd = new FormData(document.querySelector("form"));
var url = '';// 指定的后端地址
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: url,
  type: "POST",
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});
```
如果processData选择了true,哈哈哈,那前端js一定会报这个错误滴,contentType设置为true则会报org.springframework.web.multipart.MultipartException: Current request is not a multipart request这个错误;所以不要尝试改变这里了;在java后台进行处理文件流,这里是通过MultipartFile[]数组接的文件流.
我们也可以使用jquery-form的ajaxsubmit()方法进行提交表单,上传文件.这样的好处就在于提交之后不会跳转页面.另外还有ajaxForm()方法可以实现这个效果.但是ajaxForm()不能主动提交.