FormData提交

作者: 默默无闻的小人物 | 来源:发表于2021-10-14 17:52 被阅读0次

FormData提交
AJAX2.0/express简述/CORS跨域/拖拽文件上传/
formData提交表单
观 jqueryform 源码有感
使用jquery-form的FormData上传文件带参数
表单提交文件相关
XMLHttpRequest 笔记
FormData和FileReader的使用介绍
FormData
表单上传的几种方法

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>