快捷導(dǎo)航

javaScript在表單提交時(shí)獲取表單數(shù)據(jù)的示例代碼

更新時(shí)間：2025年02月27日 09:38:32 作者：怪咖學(xué)生

本文介紹了五種在JavaScript中獲取表單數(shù)據(jù)的方法：使用FormData對(duì)象、手動(dòng)提取表單數(shù)據(jù)、使用querySelector獲取單個(gè)字段數(shù)據(jù)、序列化為查詢字符串和配合AJAX提交表單數(shù)據(jù),每種方法都有示例代碼,幫助開發(fā)者更好地理解和應(yīng)用

方法 1：使用 FormData 對(duì)象

FormData 是一個(gè)方便的內(nèi)置對(duì)象，用于獲取表單中的鍵值對(duì)數(shù)據(jù)。

示例代碼

<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(); // 阻止默認(rèn)表單提交行為
    // 獲取表單數(shù)據(jù)
    const formData = new FormData(this);
    // 遍歷表單數(shù)據(jù)
    for (let [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
    // 如果需要轉(zhuǎn)換為 JSON 對(duì)象
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  });
</script>

解釋：

FormData(this)：創(chuàng)建一個(gè)包含表單所有數(shù)據(jù)的對(duì)象。
formData.entries()：獲取鍵值對(duì)的迭代器。
Object.fromEntries()：將鍵值對(duì)轉(zhuǎn)換為對(duì)象。

方法 2：通過 serialize 手動(dòng)提取表單數(shù)據(jù)

可以通過直接訪問表單元素的值手動(dòng)提取表單數(shù)據(jù)。

示例代碼

<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; // 獲取每個(gè)字段的值
      }
    });
    console.log(formData);
  });
</script>

解釋

form.elements：獲取表單中所有的控件（如 <input>、<select> 等）。
通過 element.name 識(shí)別表單字段并提取其 value。

方法 3：使用 querySelector 手動(dòng)獲取單個(gè)字段數(shù)據(jù)

如果你只想獲取某幾個(gè)字段的數(shù)據(jù)，可以直接用選擇器獲取特定的表單字段。

示例代碼

<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();
    // 獲取單個(gè)字段值
    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 查詢參數(shù)形式獲取表單數(shù)據(jù)

可以將表單提交后的數(shù)據(jù)序列化成 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);
    // 轉(zhuǎn)換為 URL 查詢參數(shù)
    const queryString = new URLSearchParams(formData).toString();
    console.log(queryString); // username=JohnDoe&email=john%40example.com
  });
</script>

解釋

URLSearchParams(formData)：將表單數(shù)據(jù)轉(zhuǎn)換為查詢參數(shù)格式。
.toString()：生成 URL 查詢字符串。

方法 5：配合 AJAX 提交表單數(shù)據(jù)

通過 fetch 或 XMLHttpRequest 可以將表單數(shù)據(jù)異步提交到服務(wù)器。

示例代碼

<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);
    // 提交表單數(shù)據(jù)到服務(wù)器
    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 })：將表單數(shù)據(jù)發(fā)送到服務(wù)器。
響應(yīng)結(jié)果可以通過 response.json() 處理。

總結(jié)

簡(jiǎn)單提取數(shù)據(jù)：使用 FormData。
手動(dòng)提取數(shù)據(jù)：直接訪問 form.elements 或 querySelector。
序列化為查詢字符串：通過 URLSearchParams。
配合提交到服務(wù)器：結(jié)合 fetch 或其他 AJAX 方法實(shí)現(xiàn)動(dòng)態(tài)提交。

選擇方法取決于實(shí)際需求，例如是否需要?jiǎng)討B(tài)處理、是否需要提交到服務(wù)器等。

到此這篇關(guān)于javaScript如何在表單提交的時(shí)候獲取到表單數(shù)據(jù)的文章就介紹到這了,更多相關(guān)javaScript表單提交獲取表單數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: