ajax----FormData对象-序列化表单-遍历

01-FormData对象

<body>
  <script>
    // FormData 不是普通对象，直接打印是没有结果的
    const fd = new FormData()

    // 往 FormData 对象追加数据
    fd.append('aa', 11)
    fd.append('aa', 22)

    console.log(fd) // FormData 不是普通对象，直接打印是没有结果的

    const res = fd.get('aa')
    console.log(res) // 11

    const res2 = fd.getAll('aa')
    console.log(res2) // [11,22]

      // const obj = {
      //   aa: 11,
      //   aa: 22,
      // }
      // console.log(obj)
  </script>
</body>

02-FormData对象序列化表单

  <body>

    <form id="form1">
      <input type="text" name="name" />
      <input type="text" name="age" />
      <input id="btn" type="submit" value="提交按钮" />
    </form>

    <script>
      const btn = document.querySelector('#btn')
      btn.onclick = function (e) {
        // 表单需要阻止默认行为
        e.preventDefault()
        // 👍 核心代码 - 序列化表单(原生JS的)
        const fd = new FormData(document.querySelector('#form1'))
        // console.log(fd)
        // 从 fd 对象中提取出想要的数据
        const name = fd.get('name').trim()
        const age = fd.get('age').trim()
        // 打印测试数据
        console.log({ name, age })
      }
    </script>
  </body>

03-FormData遍历

  <body>
    <form id="form1">
      <input type="text" name="name" value="sujiehao" />
      <input type="text" name="age" value="18" />
      <input type="text" name="gender" value="男" />
      <input type="text" value="1111" />
      <input id="btn" type="submit" value="提交按钮" />
    </form>

    <script>
      // 序列化表单(快速获取表单值)
      const fd = new FormData(document.querySelector('#form1'))
      // 准备一个空对象，用于存放 fd 数据
      const obj = {}
      // 遍历 FormData 对象，注意参数的顺序
      fd.forEach((value, key) => {
        console.log(key, value)
        // 给普通对象添加新的属性
        obj[key] = value
      })
      // 测试输出
      console.log(obj);
    </script>
  </body>

ajax----FormData对象-序列化表单-遍历

01-FormData对象

02-FormData对象序列化表单

03-FormData遍历

悦读