javaScript如何在表单提交的时候获取到表单数据

方法 1：使用 FormData 对象

FormData 是一个方便的内置对象，用于获取表单中的键值对数据。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <input type="password" name="password" value="12345" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止默认表单提交行为

    // 获取表单数据
    const formData = new FormData(this);

    // 遍历表单数据
    for (let [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }

    // 如果需要转换为 JSON 对象
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  });
</script>

解释

• FormData(this)：创建一个包含表单所有数据的对象。
• formData.entries()：获取键值对的迭代器。
• Object.fromEntries()：将键值对转换为对象。

---

方法 2：通过 serialize 手动提取表单数据

可以通过直接访问表单元素的值手动提取表单数据。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <input type="password" name="password" value="12345" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();

    const form = event.target;
    const formData = {};

    // 遍历表单元素
    Array.from(form.elements).forEach((element) => {
      if (element.name) {
        formData[element.name] = element.value; // 获取每个字段的值
      }
    });

    console.log(formData);
  });
</script>

解释

• form.elements：获取表单中所有的控件（如 <input>、<select> 等）。
• 通过 element.name 识别表单字段并提取其 value。

---

方法 3：使用 querySelector 手动获取单个字段数据

如果你只想获取某几个字段的数据，可以直接用选择器获取特定的表单字段。

示例代码

<form id="myForm">
  <input type="text" id="username" name="username" value="JohnDoe" />
  <input type="email" id="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();

    // 获取单个字段值
    const username = document.querySelector('#username').value;
    const email = document.querySelector('#email').value;

    console.log(`Username: ${username}`);
    console.log(`Email: ${email}`);
  });
</script>

解释

• 通过 querySelector 获取具体字段，并访问其 value。

---

方法 4：通过 URL 查询参数形式获取表单数据

可以将表单提交后的数据序列化成 URL 查询字符串的形式。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(this);

    // 转换为 URL 查询参数
    const queryString = new URLSearchParams(formData).toString();
    console.log(queryString); // username=JohnDoe&email=john%40example.com
  });
</script>

解释

• URLSearchParams(formData)：将表单数据转换为查询参数格式。
• .toString()：生成 URL 查询字符串。

---

方法 5：配合 AJAX 提交表单数据

通过 fetch 或 XMLHttpRequest 可以将表单数据异步提交到服务器。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(this);

    // 提交表单数据到服务器
    fetch('/submit', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error('Error:', error));
  });
</script>

解释

• fetch('/submit', { method: 'POST', body: formData })：将表单数据发送到服务器。
• 响应结果可以通过 response.json() 处理。

---

总结

• 简单提取数据：使用 FormData。
• 手动提取数据：直接访问 form.elements 或 querySelector。
• 序列化为查询字符串：通过 URLSearchParams。
• 配合提交到服务器：结合 fetch 或其他 AJAX 方法实现动态提交。

选择方法取决于实际需求，例如是否需要动态处理、是否需要提交到服务器等。

​