本文共 2731 字，大约阅读时间需要 9 分钟。
表单提交感觉项目中用到的次数越来越多了，但是遇到的问题也越来越多，使用的解决方式也层出不齐，利用周末时间，自己学习学习，然后继续总结下几种表单提交的方式。
【4】传统submit提交方式拦截，改造成ajax提交
$("#form").submit(function () { var model = ko.mapping.toJS(vm.entity); $.ajax({ url: '@Url.Action("AddCustomInfo")', type: this.method, dataType: "Json", data: { fileInfo: model }, success: function (data) { if (data.result) { layer.alert("添加成功！"); $("#myModal").modal("hide");//隐藏弹框 } } }); return false;//阻止表单提交 });
【5】利用已有JS插件进行表单提交
利用JS插件进行提交时，会有两种形式的插件，一种是先异步上传文件，然后再提交表单，并不是一并提交，另一种是一并把文件提交给后台进行接收。举几个例子是利用先提交文件方式的：如：layui.upload
再有 elementUI也是先要提交文件到服务器，然后其它信息随后提交过来，当然element有一个DataList属性可以随带一些需要的数据，那也是不错的方式，此处我就不粘贴代码了...偷个懒
【6】jQuery表单插件
这种方式在很多地方见到了，利用的是拦截submit，然后将表单中的所有信息提交到后台，需要注意的是，这必须得保证要填写信息的html元素必须要由name ,这是根据name进行后台模型转换的依据，至少来讲在asp.net mvc中是必须的。操作的步骤就是首先下载jquery.form.js包，当然的前提是jquery.js包必须存在，这像一句废话，哈哈，表单写好后，在js代码中，
$("#form").submit(function () { $(this).ajaxSubmit(function () { //执行你想要的回调函数 }); return false;//阻止表单默认提交 }); //或是 $("@form").ajaxForm(function () { //执行你想要的回调函数 }); ajaxForm()和ajaxSubmit()都可以接受0个或一个参数，接受一个参数可以是回调函数也可以是一个options对象。具体信息可以参见其它博友的文章，options对象中包含了很多参数，通过设置这些参数，可以将我们需要的限制，信息，函数一并设置好，然后
$("#form").submit(function () { $(this).ajaxSubmit(options); return false;//阻止表单默认提交 }); //或者 $("#form").ajaxForm(options);
【7】利用H5新功能 FormData
这个对象将我们需要提交的属性信息囊括其中，然后以表单形式提交给后台，是相当方便的形式，同样强大到可以将多文件进行后台提交，这种情形下面我们不需要一个特定的submit按钮甚至是说完全抛弃form表单的概念，最终将需要提交的信息直接加入到formData对象中即可
$("#add").click(function () { var formData = new FormData(); formData.append("file", document.getElementById("file").files[0]); formData.append("name", vm.name()); formData.append("address", vm.address()); formData.append("tel", vm.tel()); $.ajax({ url: '@Url.Action("addCustomInfo")', type: 'Post', dataType: "Json", processData: false, contentType: false, data: formData, success: function (data) { if (data.result) { layer.alert("添加成功！"); $("#myModal").modal("hide");//隐藏弹框 } } }); }); 注意这里的append(属性名,属性值)；其中属性名需要和后台接收参数名需要对应，这是表单提交的前提，并且ajax中需要设置contentType为false，processData为false,记得上次我备注了这两个属性是由于浏览器的差异，如此做可以屏蔽浏览器差异性，当然formData是新特性，需要IE10以上才能支持了。
该想的都想完了，也总结完了，如有更多好的方式，请和我分享，我也想学习更多东西。哈哈。知识是个好东西。
2017-12-08,望技术有成后能回来看见自己的脚步。
发表评论
最新留言
关于作者
