使用异步的方式提交表单数据的两种方式

 把表单以异步的方式上传,主要用到FormData对象

 FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式

第一种:已经存在静态的form表单

<form id=form>
     <input name="name">
     <input value="Submit" onclick="sub()">
</form>
function sub() {
            var img = document.getElementById("form");
            var formData = new FormData(img);
            formData.append('sex',boy)
            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.status === 200) {
                    //xhr.responseText
                }
            };
            xhr.send(formData);
        }

 上传的值有原来表单中的name以及后来添加的sex

第二种:动态构造一个空的表单

function sub() {
            var formData = new FormData();
            formData.append('sex',boy)
            var xhr = new XMLHttpRequest();
            xhr.open("post",url, true);
            xhr.onreadystatechange = function () {
                if (xhr.status === 200) {
                  //xhr.responseText
                }
            };
            xhr.send(formData);
        }

上传的值只有sex

猜你喜欢

转载自www.cnblogs.com/sgzg/p/9024922.html