您当前的位置： 首页 > 学无止境 > 网站建设 网站首页网站建设
html5新属性-formData打包表单数据
发布时间：2016-06-11 18:33:30编辑：雪饮阅读（）
html5的formData运用在javascript中，可以方便表单元素的数据打包，再次之前表单元素要想以ajax方式传递给后端就必须用字符串与变量拼接的形式。此方法极为不便。
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function send(){
var fm=document.getElementById("tform");
var fd=new FormData(fm);//打包form表单数据为对象
var xhr = new XMLHttpRequest();
xhr.open('POST','02-testpost.php',true);
xhr.onreadystatechange=function (){
if(this.readyState==4){
document.getElementById('debug').innerHTML=this.responseText;
}
}
/*
formData也可以手动append
var fd2=new FormData();
fd2.append('age',23);
fd2.append('username','xy');
*/
xhr.send(fd);
}
</script>
</head>
<body>
<form id="tform">
<input type="text" name="username"/><br/>
<input type="text" name="age"/><br/>
<input type="text" name="email"/><br/>
<input type="text" name="gende r"/><br/>
<input type="button" value="ajax发送" onclick="send();"/>
</form>
<div id="debug"></div>
</body>
</html>
php:
<?php
print_r($_POST);
?>
关键字词：html5,formData,打包