FormData提交
2021-10-14 本文已影响0人
默默无闻的小人物
ajax2.0
a.formdata：控制提交数据、文件上传
b.cors跨域
formdata：
set(key, value) 会覆盖
append(key, value) 不覆盖
get(key)=>value
delete(key)
formData里面有forEach方法。(value,key)=>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oUser=document.getElementById('user');
let oPass=document.getElementById('pass');
let oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
let data=new FormData();
data.set('user', oUser.value);
data.set('pass', oPass.value);
//
let oAjax=new XMLHttpRequest();
//GET
let arr=[];
data.forEach((value, key)=>{
arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
});
oAjax.open('GET', `http://localhost:8080/api?${arr.join('&')}`, true);
oAjax.setRequestHeader('my-origin-blue', window.location.hostname);
oAjax.send();
//POST
/*oAjax.open('POST', `http://localhost:8080/api`, true);
oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
oAjax.send(data);*/
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
alert('成功:'+oAjax.responseText);
}else{
alert('失败');
}
}
};
};
};
</script>
</head>
<body>
用户：<input type="text" id="user" /><br>
密码：<input type="password" id="pass" /><br>
<input type="button" value="提交" id="btn1">
</body>
</html>
