封装库--JavaScript,表单序列化结合ajax提交数据
封装库,表单序列化方法
/** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和value值,无法连缀
* 参数是要获取指定表单的原生态对象
* 返回,包含表单数据的对象,如,{表单数据}
**/
feng_zhuang_ku.prototype.xu_lie_biao_dan = function (form) {
var parts = {};
for (var i = 0; i < form.elements.length; i++) { //根据表单字段长度循环
var filed = form.elements[i]; //得到没一项表单的字段
switch (filed.type) { //判断得到字段的属性
case undefined:
case 'submit':
case 'reset':
case 'file':
case 'button':
break; //如果是以上几种的一种直接跳出
case 'radio':
case 'checkbox':
if (!filed.selected) break; //如果是以上两种,判断是否被勾选,没勾选直接跳出
case 'select-one':
case 'select-multiple':
for (var j = 0; j < filed.options.length; j++) { //下拉选项
var option = filed.options[j];
if (option.selected) {
var optvalue = '';
if (option.hasAttribute) { //非ie
optvalue = (option.hasAttribute('value') ? option.value : option.text); //value值存在取value值,value值不存在取text值
} else { //ie
optvalue = (option.attributes('value').specified ? option.value : option.text); //value值存在取value值,value值不存在取text值
}
parts[filed.name] = optvalue; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
} }
break;
default:
parts[filed.name] = filed.value; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
}
}
return parts;
};
表单序列化结合ajax提交数据效果图
提交到hj.php,返回
前台js
var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表单数据,返回对象
$().Ajax({ //执行Ajax数据传输
method:'post', //post方式发送
url:'hj.php', //发送到hj.php
data:biaodan, //发送内容,序列化获取到的表单对象
success:function (text) { //执行回调函数
alert(text); //打印出hj.php接收到的数据
},
async:true //异步模式
});
hj.php
<?php
echo 'www.jxiou.com';
print_r($_POST);
?>