JS FormData

FormData

**FormData**接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过[XMLHttpRequest.send()](<https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send>)方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

创建formData对象

• 构造函数用于创建一个新的FormData对象

  // 通过FormData构造函数创建一个空对象
  let formdata = new FormData();
  

• 通过表单对formData进行初始化

  <form id="advForm">
      <p>广告名称：<input type="text" name="advName"  value="xixi"></p>
      <p>广告类别：<select name="advType">
          <option value="1">轮播图</option>
          <option value="2">轮播图SeriousLose</option>
          <option value="3">SeriousLose1</option>
          <option value="4">SeriousLose2</option>
      </select></p>
      <p><input type="button" id="btn" value="添加"></p>
  </form>
  

  // 获得表单按钮元素
  var btn=document.querySelector("#btn");
  // 为按钮添加点击事件
  btn.onclick=function(){
      // 根据ID获得页面当中的form表单元素
      var form=document.querySelector("#advForm");
      // 将获得的表单元素作为参数，对formData进行初始化
      var formdata=new FormData(form);
      // 通过get方法获得name为advName元素的value值
      console.log(formdata.get("advName"));//xixi
      // 通过get方法获得name为advType元素的value值
      console.log(formdata.get("advType"));//1 
  }
  

方法

• 取值

  • FormData.get()

    // 获取key为age的第一个值
    formdata.get("age");
    

  • FormData.getAll()

    • 返回一个包含 FormData对象中与给定键关联的所有值的数组。

    // 获取key为age的所有值，返回值为数组类型
    formdata.getAll("age");
    

• 添加数据

  • FormData.append()

    • 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

    // 通过append()方法在末尾追加key为name值为laoliu的数据
    formdata.append("name","SeriousLose");
    formdata.append("name","SeriousLose1");
    console.log(formdata.get("name"));// SeriousLose
    console.log(formdata.getAll("name"));//["SeriousLose", "SeriousLose1"];
    

• 修改数据

  • FormData.set()

    • 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

    // 如果key的值不存在会为数据添加一个key为name值为SeriousLose的数据
    formdata.set("name","SeriousLose");
    

    var formdata = new FormData();
    formdata.append("name","SeriousLose");
    formdata.append("name","SeriousLose1");
    console.log(formdata.get("name"));// SeriousLose
    console.log(formdata.getAll("name"));//["SeriousLose", "SeriousLose1"]
    
    // 将存在的key为name的值修改为SeriousLose
    formdata.set("name","SeriousLose2");
    console.log(formdata.get("name"));// SeriousLose
    console.log(formdata.getAll("name"));// ["SeriousLose"]
    

• 是否存在key

  • FormData.has()

    • 返回一个布尔值，表明 FormData 对象是否包含某些键

    formdata.has("name"); // true
    

• 删除key

  • FormData.delete()

    formdata.delete("name");
    

循环

  let formData = new FormData();
  formData.append('1', '2');
  // 存在对象要 转成字符串存储
  formData.append('2', { a: 1 });
  formData.append('3', JSON.stringify({ a: 1 }));

  // 第一种
  for (var value of formData.values()) {
    console.log(value);
  }

  // 第二种
  for (var [a, b] of formData.entries()) {
    console.log(a, b);
  }

FormData - Web API 接口参考 | MDN

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/JS-FormData-c13cf107ebc347568c3a9e74cfca2cd5