前端学习之AJAX表单提交

xiaoxiao2021-02-28  7

    传统的项目可以由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方法即可。

   如果有错误欢迎大家批评指正,谢谢!!!

转载请注明原文地址: https://www.6miu.com/read-2400376.html

最新回复(0)