javascript - 如何使用原生的XMLHttpRequest對象提交表單?

HTML:

JavaScript:

var submit = document.getElementById("submit");        submit.onclick = function() {            var xhr = new XMLHttpRequest();            xhr.onreadystatechange = function(){                if(xhr.state == 4) {                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {                        console.log(xhr.responseText);                    } else {                        alert("HttpRequest was unsccessful: " + xhr.status);                    }                }            }            xhr.open("post", "form.php", true);            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            var form = document.getElementById("info");            xhr.send(serialize(form));    }

form.php

代碼如上, 我想要達到的效果, 是跟在form裡添加了action和method屬性一樣, 提交後可以自動跳轉到form.pp.
但是這樣提交並沒有反應, 搜了一下, 全是關於jquery的. 還是不知道用ajax提交表單是怎樣的格式.

回複內容：

HTML:

JavaScript:

var submit = document.getElementById("submit");        submit.onclick = function() {            var xhr = new XMLHttpRequest();            xhr.onreadystatechange = function(){                if(xhr.state == 4) {                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {                        console.log(xhr.responseText);                    } else {                        alert("HttpRequest was unsccessful: " + xhr.status);                    }                }            }            xhr.open("post", "form.php", true);            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            var form = document.getElementById("info");            xhr.send(serialize(form));    }

form.php

代碼如上, 我想要達到的效果, 是跟在form裡添加了action和method屬性一樣, 提交後可以自動跳轉到form.pp.
但是這樣提交並沒有反應, 搜了一下, 全是關於jquery的. 還是不知道用ajax提交表單是怎樣的格式.

試試將xhr.send(serialize(form))改為

var formData = new FormData(form);xhr.send(formData);

formData是HTML5用於非同步提交表單的，應該可以滿足樓主的需求。

參考http://www.cnblogs.com/lhb25/...

var fd = new FormData;fd.append("username",document.querySelector("#username").value);fd.append("password",document.querySelector("#password").value);...xhr.send(fd);

