前端学习之AJAX表单提交

    传统的项目可以由SpringMVC的处理器适配器和处理器映射器进行处理，并由视图解析器返回相应的页面。在前后端分离的情况下，前端需要使用AJAX向后台进行数据请求，这个时候不能简单的使用表单的 submit 提交方式，但是使用普通的$.ajax()方法则会遇到提交给后台的文件为NULL

    以下是我的解决办法：

    一、表单：

<form id="myForm" enctype="multipart/form-data" >
    <input type="file" name="file" required style="display: none;" id="previewImg">
    <input type="button" οnclick="add()" value="提交" />
</form>

    二、js：

    首先要引入jquery.form.js文件

function add() {
    var options = {
        type: 'post',
	url: 'http://localhost:9911/cms/addCarousel',
	success: function(ret) {
	    alert(123);
	},
	error: function(ret) {
	    alert("shang chuan cuo wu");
	}
    };
   $('#myForm').ajaxSubmit(options);
}

    三、controller代码

@RequestMapping(value = "/addCarousel", methods = RequestMethod.POST)
public RecycleResult addCarousel(HttpServletResponse response, MultipartFile file, Carousel carousel){
     // 相应的处理
     return RecycleResult.ok();
}

    四、小结

        今天在做项目的时候遇到的一个问题，ajax提交中的表单序列化只能序列化数据，不能序列化文件，带有文件的表单提交直接使用jquery的form插件中的ajaxSubmit方法即可。

   如果有错误欢迎大家批评指正，谢谢！！！