Ajax应用之表单提交

Ajax中提交表单，实际上是手动获取表单的数据，然后对数据进行封装，再通过异步请求对象提交到服务端的过程。

 

Ajax异步请求对象的创建（可参考http://blog.youkuaiyun.com/lixianlin/archive/2009/12/14/5001923.aspx），需要考虑一下浏览器兼容性，IE和非IE浏览器下创建方式不同。返回结果的处理，其实也就是异步请求对象的回调函数的构建。这两步操作只要明白了异步请求对象的工作原理，实现起来都不难，难的是如何获取表单的数据并对数据进行封装。

 

获取表单数据的思路：对表单中的所有元素（当然是能够提交数据的元素，不能提交数据的元素无须考虑）进行遍历，获取每个元素的name属性和value值，这其中就需要考虑怎样获取value值，比如象select元素，并不是所有option的value值都有效，只有被选中的option才是有效的，这个不用多说，因为select元素的作用就是那样的。

 

表单数据封装：换种方法说也说是编码，凡提到数据传输，必然会提到编码，因为只有编码和解码采用同一种机制（或者说协议），才能保证传输数据的正确性。正常情况下的表单提交，如GET方式，默认是采用“application/x-www-form-urlencoded“编码方式对数据封装的，得到的结果是以&连接的键值对的形式，其中的键和值需要进行编码处理，结果形如：key1=val1&key2=val2&key3=val3。可以用encodeURIComponent方法对键和值进行编码，也可以自定义编码方式，只要让服务器操作方便就行。

 

需要注意的事，对于file文件上传类型，是无法直接通过Ajax来处理的，因为在设计JS的时候，出于安全性考虑，网页中的JS被设计成不能访问文件的。网上所说的Ajax上传文件（严格意义上这种说法是不正确的），都是通过其他方式来上传文件的。

 

提供一个简单遍历表单数据的方法：

function GetRequestString(frm) {
	frm = $(frm);
	var e;
	var arr = [];
	for (var i = 0; i < frm.length; ++i) {
		e = frm[i];
		if (!e.name || e.disabled) {
			continue;
		}
		if (e.type == 'select-one') {
			arr.push(encodeURIComponent(e.name) + '=' + encodeURIComponent(e.options[e.selectedIndex].value));
		} else if (e.type == 'select-multiple') {
			for (var j = 0; j < e.length; ++j) {
				if (e.options[j].selected) {
					arr.push(encodeURIComponent(e.name) + '=' + encodeURIComponent(e.options[j].value));
				}
			}
		} else if (e.type == 'checkbox' || e.type == 'radio') {
			if (e.checked) {
				arr.push(encodeURIComponent(e.name) + '=' + encodeURIComponent(e.value));
			}
		} else if (typeof(e.value) != 'undefined') {
			arr.push(encodeURIComponent(e.name) + '=' + encodeURIComponent(e.value));
		}
	}
	return arr.join('&');
}

参数为表单对象，或表单的id。

 

代码中用到的$()函数的定义：

function $(s) {
	if (typeof(s) == "string") {
		return document.getElementById(s);
	} else if (typeof(s) == "object") {
		return s;
	} else {
		return document;
	}
}