有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活。
用HTML5的FormData来初始化表单
var formdata=new FormData(document.getElementById("advForm"));
看似还可以,但发现有两个问题,
一,formdata.get()方法不知为什么用不了
二,Form Data 数据格式不如Jq的简洁,
WebKitFormBoundary29h06FRZequJgQtR
var stu={
name:"冷荣富",
age:22,
sex:"男"
};
$.ajax({
type : "POST", //提交方式
url : "http://localhost/jsonTest.php",//路径,www根目录下
data : {
"student" : stu
},//数据,这里使用的是Json格式进行传输
success : function(result) {//返回数据根据结果进行相应的处理
alert(result);
}
});
这段JQ提交的数据是序列化的
网查如然不用我造*了,转一个可用的
使用原生的js模拟了表单序列化,代码中对表单处理尽可能地进行文字说明
其中对于url,字段名称,中文进行了使用了encodeURIComponent()进行编码。
Object.prototype.serialize = function(){
var res = [], //存放结果的数组
current = null, //当前循环内的表单控件
i, //表单NodeList的索引
len, //表单NodeList的长度
k, //select遍历索引
optionLen, //select遍历索引
option, //select循环体内option
optionValue, //select的value
form = this; //用form变量拿到当前的表单,易于辨识 for(i=0, len=form.elements.length; i<len; i++){ current = form.elements[i]; //disabled表示字段禁用,需要区分与readonly的区别
if(current.disabled) continue; switch(current.type){
//可忽略控件处理
case "file": //文件输入类型
case "submit": //提交按钮
case "button": //一般按钮
case "image": //图像形式的提交按钮
case "reset": //重置按钮
case undefined: //未定义
break;
//select控件
case "select-one":
case "select-multiple":
if(current.name && current.name.length){
console.log(current)
for(k=0, optionLen=current.options.length; k<optionLen; k++){
option = current.options[k];
optionValue = "";
if(option.selected){
if(option.hasAttribute){
optionValue = option.hasAttribute('value') ? option.value : option.text
}else{
//低版本IE需要使用特性 的specified属性,检测是否已规定某个属性
optionValue = option.attributes('value').specified ? option.value : option.text;
}
}
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
}
}
break; //单选,复选框
case "radio":
case "checkbox":
//这里有个取巧 的写法,这里的判断是跟下面的default相互对应。
//如果放在其他地方,则需要额外的判断取值
if(!current.checked) break; default:
//一般表单控件处理
if(current.name && current.name.length){
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
}
}
}
return res.join("&");
}
对HTML表单使用:
formElement.serialize();
得到类似如下结果:a=1&b=2&c=3&d=4&e=5
相关链接:https://blog.csdn.net/qq_35087256/article/details/81253559