利用ajaxSubmit提交的时候,解决多个input name相同的问题
有时候我们在移动端提交表单的时候,为了不让submit按钮提交后,页面跳转到form action的地址,我们可能会用ajax form 插件来提交整个表单。
按钮会就这么写
<form> <input name="test" value="test1" /> <input name="test" value="test2" /> <input name="test" value="test3" /> <button type="button">submit</button> </form>
js部分,移动端如果用zepto的话 会这么写
$("button").on("tap",function(){ $("form").ajaxSubmit({ url: "https://www.goggle.com/", type:post, success:function(){ alert("success!"); return false; //防止页面跳转 } }); });如果用zepto 的 ajax form插件提交整个表单的话,含有相同name 的input 提交到服务器后,最后一个往往会覆盖前面所有的,服务器端接收的时候,只能看到最后一个value值。
通过查看zepto.form.min.js 这个插件的源码的时候发现里面这段js
items.each(function(index) { params[this.name] = this.value; });
这个直接把所有相同的属性的值给覆盖掉了,为了达到目的,能上传多个相同name的input的值,我在这里进行了一点点小的改动,成功可以提交了
items.each(function(index) { if (params[this.name] == undefined) { params[this.name] = this.value } else { params[this.name] += "," + this.value } });特地查看了一下jquery 的ajax form插件,发现这个是完好的,所以如果有小伙伴用到了 zepto.form.min.js这个插件的时候,并且需要提交多个name相同的input的时候可以用以上办法解决。附上完整的zepto.form.min.js的代码,自行拷贝后,压缩一下就能直接调用。
(function($) { $.fn.ajaxSubmit = function(options) { var form = this; var formAction = form.attr("action"); var formMethod = form.attr("method"); if (formMethod == null || !/^(POST|GET)$/i.test(formMethod.trim())) { formMethod = "GET" } var params = new Object(); var items = form.find("input[type=hidden]," + "input[type=text]," + "input[type=password]," + "textarea," + "select," + "input[type=radio]:checked," + "input[type=checkbox]:checked"); items.each(function(index) { if (params[this.name] == undefined) { params[this.name] = this.value } else { params[this.name] += "," + this.value } }); var dataType = options.dataType; if (dataType == null) { dataType = "json" } var success = options.success; if (success == null) { success = function() {} } $.ajax({ type: formMethod, url: formAction, data: params, dataType: dataType, success: success }) } })(Zepto);
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇:没有了
- 下一篇:没有了