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得到的
