FormData实现form表单的数据打包
2015-02-04
HTML代码：
|
<html> ????<head> ????<title>FormData</title>? ????<script?type="text/javascript"> /*formData?表单数据 ?这是在html5中新增的一个API ?能以表单对象作为参数，自动的把表单的数据打包 ?当ajax发送数据时，发送些formData， ?达到发送表单内各数据的目的。 ?*/ function?send(){ ????????//获取form的dom对象 ????var?fm?=?document.getElementById(‘tform‘); ????????//将form数据用formData打包 ????var?fd?=?new?FormData(fm); ???? ????var?xhr?=?new?XMLHttpRequest(); ????xhr.open(‘POST‘,‘FormData.php‘,true);???//post发送 ????xhr.onreadystatechange?=?function(){ ????????if(this.readyState?==?4){ ????????????document.getElementById(‘debug‘).innerHTML?=?this.responseText; ????????} ????} ????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="gender"?/><br/> ????????<input?type="button"?value="Ajax发送"?onclick="send();"?/><br/> ????</form> ????<div?id?=?"debug"></div> ????</body> </html> |
?
PHP代码
<?php
print_r($_POST);
?>
如图所示，php的POST输出了，针对输入的form表单的打包数据
使用 formdata的对象 .append(‘key‘,‘value‘)，可以实现对数据的增加
同样：
formdata 不仅可以实现对数据的打包， 还可以人为的添加数据
????//建立一个空的formData数据
????var fd2 = new FormData();
????????//人为的添加数据
????fd2.append(‘username‘,"zhangsan");
????fd2.append(‘age‘,23);
????xhr.send(fd2);
运行后，可以看到，我们并未数据，显示的数据是我们append得到的
?
?
?
?