纯js的ajax实现异步提交表单

为什么80%的码农都做不了架构师？>>>   

很多时候需要异步提交表单，当表单太多是时候，一个个getElementById变得很不实际

当然，jquery可以实现异步提交表单，jquery.form.js这个库貌似也挺流行

只是有时候并不想使用额外的库，所以就琢磨着自己写，用纯js来实现异步提交表单

实现如下（本例用POST方式提交，用php作为服务器脚本）：

form.html：

	


	

		Username:

		Password:

		Gender:Male 
			Female

		Interest:Programing 
			Game 
			Sport
		
	
	

ajax_form.js：

function createXmlHttp() {
	var xmlHttp = null;
	
	try {
		//Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		//IE
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	return xmlHttp;
}

function submitForm(formId, tipId) {
	var xmlHttp = createXmlHttp();
	if(!xmlHttp) {
		alert("您的浏览器不支持AJAX！");
		return 0;
	}
	
	var e = document.getElementById(formId);
	var tip = document.getElementById(tipId);
	var url = e.action;
	var inputs = e.elements;
	var postData = "";
	for(var i=0; i

process.php：

Username: " . $_POST['username'];
$text .= "
Password: " . $_POST['password'];
$text .= "
Gender: " . $_POST['gender'];
$text .= "
Interest:";
for($i=0; $i

测试如下：

提交前：

提交后：

转载于:https://my.oschina.net/seast/blog/118654