FormData()收集表單資訊
阿新 • • 發佈：2019-02-01
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單資料物件</title> </head> <body> <div> <form> <table> <tr> <td>姓名：</td> <td><input type="text" name="uname"/></td> </tr> <tr> <td>性別：</td> <td><input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="0"/>男</td> </tr> <tr> <td>電話：</td> <td><input type="tel" name="tel"/></td> </tr> <tr> <td>郵件：</td> <td><input type="email" name="email"/></td> </tr> <tr> <td>密碼：</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td> <input type="button" id="sub" value="上傳"> </td> </tr> </table> </form> </div> <script> var form = document.getElementsByTagName("form")[0]; var sub=document.getElementById("sub"); sub.onclick=function () { //使用FormData收集表單資訊 var fd = new FormData(form); //查看錶單資訊 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } xhr.open("post", "./TestFormData.php"); xhr.send(fd); } </script> </body> </html>
PHP：
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/8/23
* Time: 15:03
*/
print_r($_POST);