使用FormData解决ajax提交表单时候的 很多input输入框的问题

215 阅读1分钟

点击登录后,ajax携带的参数传递如下:

image.png

步骤

点击button按钮,先阻止默认事件。

编写原生ajax,open里面参数设置为(“post”,url,true)

ajax里面的参数是input框的值,input框太多,不能使用模板字符串拼接,使用FormData的方式,获取到form里面input框的值 const data =new Form(data) 可以用循环遍历的的方式查看data里面是input的值,里面是数组的形式

使用FormData获取携带的参数,就不用在ajax里面设置请求头了。

点击提交以后,在浏览器的network里面可以看到ajax携带的参数



<form
  id="login"
  action="https://www.baidu.com/login"
  method="POST"
  enctype="multipart/form-data"
>
  <input type="text" name="username" placeholder="用户名" />
  <input type="text" name="height" placeholder="身高" />
  <input type="text" name="age" placeholder="年龄" />
  <input type="text" name="sex" placeholder="性别" />
  <input type=" password" name="password" placeholder="密码" />
  <input id="submit" type="submit" value="登录" />
</form>

<script>
  const url = "https://www.baidu.com/login";
  // 使用form表单找到下面的input框
  const form = document.getElementById("login");

  // 清除form的默认提交事件
  const button = document.getElementById("submit");
  button.addEventListener("click", (e) => {
    e.preventDefault();
    // 点击button的时候,ajax携带参数请求数据
    // 编写ajax
    const xhr = new XMLHttpRequest();
    // 使用onreadystatechange
    xhr.addEventListener("load", () => {
      // status
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log("请求响应成功");
        console.log(xhr.responseText);
      }
    });

    //  使用FormData获取data
    const data = new FormData(form);
    // 使用append追加数据
    data.append("adress", "beijing");
    data.append("hobby", "打球");
    // 准备open
    xhr.open("post", url, true);

    // 发送,data就是input框里面的所有内容
    xhr.send(data);
  });
</script>