首页 > JavaScript > JS自动获取Form表单数据并转换成键值对

JS自动获取Form表单数据并转换成键值对

2013年3月21日 发表评论 阅读评论

Jquery的$.ajax方法可以实现ajax调用，要设置url,type,data参数等。
如果要提交现有Form需要写很多代码，何不直接将Form的所有信息直接转移到ajax中呢。

<form id="Form1" action="action.php" method="post" >
名称：<input name="name" type="text" /><br />
密码：<input name="password" type="password" /><br />
<input type="submit" value="提 交" />
</form>

当提交后，会跳转到action.php页面。并可以通过$_POST取到值。

使用ajax直接按照Form信息直接提交。不刷新页面。
核心JS代码:

// 将form转为AJAX提交
// 第一个参数，是要提交的form
// 第二个参数是ajax调用成功后的处理函数
function ajaxSubmit(frm, fn) {
	var dataPara = getFormJson(frm);
	$.ajax({
		url: frm.action,
		type: frm.method,
		data: dataPara,
		success: fn
	});
}
 
// 将form中的值转换为键值对。
// 形如：{name:'aaa',password:'tttt'}
// ps:注意将同名的放在一个数组里
function getFormJson(frm) {
	var o = {};
	var a = $(frm).serializeArray();
	$.each(a, function () {
		if (o[this.name] !== undefined) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
}
 
//调用 
$(document).ready(function(){
	$('#FormAction').bind('submit', function(){
		ajaxSubmit(this, function(data){
			// 可加入自己调用返回后处理代码
			alert(data);
		});
		// 防止Form真实提交
		return false;
	});
});
分类: JavaScript 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.