欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

javascript - 如何使用原生的XMLHttpRequest对象提交表单?

程序员文章站 2022-06-07 16:55:15
...
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 

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 

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);