有时候我们在移动端提交表单的时候,为了不让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);