ajax上传多文件和数据,Ajax上传数据和上传文件（三种方式）

1

Title

.btn {

background-color: coral;

color: white;

padding: 5px 10px;

border-radius: 26%;

cursor: pointer;

}

原生Ajax测试

get发送  post发送

仿Ajax(iframe+form)测试

提交

{% comment %}

上传文件

Ajax(jQuery+原生)上传

上传

Ajax(iframe+form)上传

上传

function AjaxTest1() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("GET", "/ajax?p=123");

xhr.send(null);

}

function AjaxTest2() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("POST", "/ajax");

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");

xhr.send("p=222");

}

function AjaxTest4() {

document.getElementById("ifm").onload = AjaxTest3;

document.getElementById("fm").submit();

}

function AjaxTest3() {

{#console.log(thi.contentWindow.document.body.innerText);#}

{#console.log($(thi).contents().find("body").html());#}

var content = this.contentWindow.document.body.innerHTML;

var obj = JSON.parse(content);

if (obj.status) {

alert(obj.message);

}

}

function AjaxTest5() {

var formdata = new FormData()

formdata.append("k1", "v1");

formdata.append("k2", "v2");

formdata.append("k3", document.getElementById("file").files[0]);

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("POST", "/ajax");

{#xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");#}

xhr.send(formdata);

}

function AjaxTest6() {

document.getElementById("ifm2").onload = AjaxTest7;

document.getElementById("fm2").submit();

}

function AjaxTest7() {

{#console.log(thi.contentWindow.document.body.innerText);#}

{#console.log($(thi).contents().find("body").html());#}

var content = this.contentWindow.document.body.innerHTML;

var obj = JSON.parse(content);

console.log(obj);

}