利用新技术FormData表单数据对象, 可以实现快速收集表单信息。
FormData是html5的新技术, 在主流浏览器(IE10以上版本支持)都可以正常使用。
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(evt){
//ajax+dom无刷新获得表单信息并传递给服务器
//① 获得表单信息
//利用javascript提供的新技术快速、简单地收集全部的表单域信息
//FormData() 表单数据对象可以帮我们完成此需求
var fd = new FormData(fm);//收集fm元素节点内部的表单域信息
//也可写成var fd = new FormData(this);
//fd里边有我们收集到的全部的表单域信息
//② ajax传递表单信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
xhr.open('post','./04.php');
//xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(fd);
//event.returnValue=false; //IE6 7 8
evt.preventDefault();//浏览器进制跳转 主流浏览器
}
}
</script>
</head>
<body>
<h2>无刷新form表单提交(FormData)</h2>
<form method="post" >
<p>用户名：<input type="text" name="username" id="mingzi"></p>
<p>密码：<input type="password" name="userpwd" id="mima"></p>
<p>邮箱：<input type="text" name="useremail" id="youxiang"></p>
<p><input type="submit" value="注册"></p>
</form>
</body>
</html><?php
//获得传递过来的post格式信息
print_r($_POST);
?>注意：FormData使用
1 ajax不要设置header头
2 form表单域必须有name属性
3 IE10以上版本支持FormData, IE9不支持
本文暂时没有评论，来添加一个吧(●'◡'●)