利用FormData收集表單資料實現ajax傳遞post資料

標籤：blog   http   java   使用   os   資料   

向伺服器ajax傳入資料可以：1.利用dom擷取表單值傳入（f1）   2.利用FormData發送傳遞ajax資料（f2）（沒有form表單，這使用append()方法添加資料參考f3）

<form id="reg">　　使用者名稱:<input type="text" id="username" name="username" /><br />　　密碼:<input type="text" id="userpwd" name="userpwd" /><br />　　郵箱:<input type="text" id="useremail" name="useremail" /><br />    <input type="button" value="註冊" onclick="f1()"/></form><script type="text/javascript">//ajax收集表單資料function f1(){    //利用dom技術可以收集表單資訊    var name = document.getElementById(‘username‘).value;    var pwd = document.getElementById(‘userpwd‘).value;    var email = document.getElementById(‘useremail‘).value;        var data_str = "name="+name+"&pwd="+pwd+"&email="+email;        var xhr = new XMLHttpRequest();    xhr.open(‘post‘,‘./03.php‘);    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");    xhr.send(data_str);}function f2(){//①利用進階方法處理form表單(html5新標準，IE瀏覽器不支援)var reg = document.getElementById(‘reg‘);//②製作一個form資料對象 FormData()//製作一個formdata表單資料對象，裡邊存放form表單的資訊var fd = new FormData(reg);//reg是form元素節點對象var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){alert(xhr.responseText);}}xhr.open(‘post‘,‘./03.php‘);//③ 給伺服器傳遞了一個form資料對象//④ ajax開啟檔案就post方式xhr.send(fd);}//沒有form表單收集資料【3】function f3(){    //沒有form元素節點對象    var fd = new FormData();    var name = document.getElementById(‘username‘).value;    var email = "[email protected]";    var pwd = "123456";    //把以上資料填充到fd對象裡邊    fd.append(‘name‘,name);    fd.append(‘email‘,email);    fd.append(‘pwd‘,pwd);    var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function(){        if(xhr.readyState==4 && xhr.status==200){            alert(xhr.responseText);        }    }    xhr.open(‘post‘,‘./03.php‘);    xhr.send(fd);}</script>