ajax无刷新方式收集表单并提交表单

ajax无刷新方式收集表单有两种方式，

一个是使用html5的FormData。一个是传统的方式。

一，FormData，在主流的浏览器中可以用，IE不好用啊。

另外，FormData使用有两个条件，第一，input里面需要有name属性；第二，不需要用到header头。

<script type="text/javascript">
//给form表单制作一个提交事件onsubmit<br />
window.onload = function(){
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(evt){
//①利用FromData表单数据对象，快速搜集表单数据
var fd = new FormData(form);
//alert(info);
//②ajax把收集好的信息传递给服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('POST','register.php');
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器默认动作
evt.preventDefault();
//return false;
}
}

</script>

二，传统方式。

<script type="text/javascript">
//给form表单制作一个提交事件onsubmit<br />
window.onload = function(){
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(evt){
//①收集form表单信息

var username = document.getElementById('username').value;
var userpass = document.getElementById('userpass').value;
var useremail = document.getElementById('useremail').value;

var info = 'username='+username+'&userpass='+userpass+'&useremail='+useremail;//发送请求字符串
//alert(info);
//②ajax把收集好的信息传递给服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('POST','register.php');
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(info);
//阻止浏览器默认动作
evt.preventDefault();
//return false;
}
}

</script>

另外，写一个form表单。

<form name="form">
<p>用户名：<input type="text" name="username" id="username"/></p>
<p>密码：<input type="password" name="userpass" id="userpass"/></p>
<p>邮箱：<input type="text" name="useremail" id="useremail"/></p>
<p><input type="submit" value="注册"/></p>
</form>

传值到一个php文件

<?php
//搜集信息
print_r($_POST);
?>

就这么简单。