由于是第一次学习ajax,所以在ajax与后台SpringMVC的整合中走了不少弯路,以下是我对于简单交互的整理,希望能够帮助到大家:
首先先放一份能够传递一般数据+文件的ajax请求:
<script> function fun(){ var formData = new FormData(document.getElementById("registerForm")); $.ajax({ url: "/user/register", type: "POST", dataType: "text", data: formData,//有File的form不可以用$("#registerForm").serialize() processData: false, contentType: false, success: function(data){ console.log(data);//打印服务器端返回的数据 alert(data); } error: function(){ alert("erroring..."); } }); }后端Controller的代码如下:
@Controller @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @RequestMapping(value = "/register", method = RequestMethod.POST) @ResponseBody public String register(User user, @RequestParam(value = "file",required = false) MultipartFile file) throws JsonProcessingException { userService.register(user, file); return "add user success!"; } }AJAX需要注意的点有非常多,尽量避免踩坑!!
通过**$(“#id”).serialize()**的方法可以对form表单进行序列化,从而将表单中的所有数据传递到服务器端但是上述方法只能传递一般的参数,如果传递文件将无法被序列化,从而导致报500的MultipartFile对象空指针异常错误于是我们需要通过JavaScript的FormData对象去实现文件的上传,这个对象比较方便,甚至都不需要表单中声明enctype=“multipart/form-data”,就可以直接提交同时,使用FormData还需要注意:应该使用较新的Jquery,老版本的可能不支持,同时必须设置contentType : false和processData : false。否则,jquery会报**“Uncaught TypeError: Illegal invocation”**这样的错误。因为jquery会试图将不是字符串的内容进行转换,设置processData : false禁止其转换,设置contentType : false是告诉jquery不要为其设置Content-Type头,防止上传失败如果报415错误,需要注意表单的上传文件不可以和pojo实体类中存放文件的路径变量名相同,否则会被错误的封装进而报415错误如果报400错误,需要注意是否form表单的name与实体类封装的属性名不一致如果Ajax的回调函数不执行,需要检查Controller的返回值类型是否与ajax设置的dataType相匹配!还有我犯的一个很傻的错误,如果有遇到的能够帮助大家:我之前先用的是jsp,所以我把form表单的action、method等参数写上了,然后之后绑定点击按钮的ajax请求的时候没有把之前表单的action等删除,导致了一点击并不是触发ajax的异步请求,而是普通的表单提交,这点我过了好久才发现,太憨了!感谢以下文章的分享:
https://blog.csdn.net/chengp919/article/details/78105908https://www.cnblogs.com/zhuxiang1633/p/8675716.html