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

 把表单以异步的方式上传，主要用到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

 

转载于:https://www.cnblogs.com/sgzg/p/9024922.html