JavaScript >> Javascript 文檔 >  >> Tags >> object

將表單數據轉換為 JavaScript 對象

簡介

在 JavaScript 中使用表單時,您通常需要將表單數據轉換為 JavaScript 對象 (JSON),以便填充數組、數據庫、本地存儲、將其發送到 API,甚至使用應用程序中的數據。表單數據和 JSON 之間的轉換是處理表單數據的最常見方式之一,因為它為該數據的大量其他用途打開了大門。

注意: 這個應用程序在 CodePen 上作為演示提供。

讓我們開始創建一個簡單的 HTML 表單,其中包含幾個常見的表單字段 - 兩個輸入字段、一個文本區域和一個提交按鈕:

<form>
    <div class="form-control">
        <label for="name">Full Name</label>
        <input id="name" name="name" type="text" />
    </div>
    <div class="form-control">
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email" />
    </div>
    <div class="form-control">
        <label for="message">Enter a Message</label>
        <textarea id="message" name="message" rows="6" cols="65"></textarea>
    </div>
    <button class="btn" type="submit">Send</button>
</form>

現在,我們可以看看如何將其數據轉換為 JSON(JavaScript Object Notation) 使用 FormData API。

FormData API

FormData 是一個內置的瀏覽器 API,它為我們提供了一種輕鬆訪問 HTML 表單中的任何字段的方法。使用 FormData API 的第一步是獲取 form 元素 使用一些適當的 HTML DOM 方法 - document.querySelector()document.getElementById() .之後,我們可以添加一個調用callbackFunction的事件監聽器 當它註冊一個 submit 表單上的事件:

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

為了讓事件監聽器工作,我們必須定義處理 submit 的函數 事件。現在,讓我們讓它創建 FormData 對象並將其內容記錄到控制台:

function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);
    console.log(myFormData);
}

注意: 我們使用了 preventDefault() 防止在單擊提交按鈕後重新加載表單 - 這是默認行為。這是一個合理的默認值,但為了在我們的應用程序中進行說明 - 我們將阻止它並在右側 div 上顯示數據。

當您運行上面的代碼時,結果將是一個空對象,這不是我們所期望的:

FormData {}

儘管看起來我們創建了一個空對象,但事實並非如此。那個FormData 對像對我們表單中的每個字段都有一個鍵值對 - 因此,我們需要遍歷所有這些對並將它們存儲在一個單獨的對像中。之後,我們可以使用該對象訪問表單的每個單獨字段。

我們可以通過兩種主要方式從 FormData API 獲取數據——一種是遍歷每個鍵值對,另一種是使用 Object.fromEntries() 方法。

如何使用循環將表單數據轉換為 JSON

FormData 創建可讀對象的第一種方法 對像是迭代其鍵值對並手動將鍵和值添加到新創建的對象。出於本文的目的,我們將使用 forEach() JavaScript 中的循環。首先,我們將創建一個空對象,然後遍歷 FormData 我們在上一節中創建的對象:

const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj[key] = value));

注意: forEach() 方法不是 async 友好,如果你需要你的回調函數來支持 async 調用 - 你應該使用 for-of 循環。

此時我們可以修改callbackFunction() 從上一節開始,以便正確地將表單數據作為對象輸出:

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
                      
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));
    console.log(formDataObj);
});

現在,當我們填寫表單並單擊提交按鈕時,我們應該有以下輸出:

{
    "name": "John Doe",
    "email": "[email protected]",
    "message": "Hello World"
}

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

該對像以字段名作為鍵,以對應的字段值作為值。

如何使用Object.fromEntries()將表單數據轉換為JSON

或者,我們可以使用 Object.fromEnteries() 方法而不是循環從 FormData 中檢索表單字段 目的。這樣我們就不需要在開始之前創建一個空對象 - 該方法允許我們直接轉換 FormData 對像到對應的 JavaScript 對象:

const formDataObj = Object.fromEntries(myFormData.entries());

此時,我們修改後的回調函數將如下所示:

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    console.log(formDataObj);
});

使用 Object.fromEnteries() 填充的對象 將表單字段的名稱作為其鍵,並將相應的表單值作為其值:

{
    "name": "John Doe",
    "email": "[email protected]",
    "message": "Hello World"
}

注意: 對於這兩種方法,我們都可以使用 JSON.stringify() 將對象轉換為 JSON 字符串,然後我們可以使用該字符串將 JSON 編碼的數據發送到 API。

如何使用 FormData API 獲取 JSON 中的多個選定值

上述方法幾乎與所有表單字段兼容——輸入文本、數字、單選、選擇……但是,還有其他字段使用起來可能有點棘手。最值得注意的是複選框 - 它允許選擇多個值。但是之前顯示的方法將僅用一個替換所有這些選定的值 - 最終存儲在結果對像中。讓我們看看如何解決這個問題並將所有選定的值存儲在結果對像中。假設我們有一個帶有復選框字段的 HTML 表單:

<!-- -->

<div class="form-control-2">
    <p class="group-label">Your favourite pet:</p>
    <input type="checkbox" name="favorite_pet" value="Cats" />Cats
    <input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
    <input type="checkbox" name="favorite_pet" value="Birds" />Birds
</div>

<!-- -->

我們可以使用 getAll() 將所有選定的數據放入一個數組中 FormData 上的方法 對象:

formDataObj.favorite_pet = myFormData.getAll('favorite_pet');

此時,我們的代碼將如下所示:

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
    console.log(formDataObj);
});

填充的對象將包含用戶在復選框字段中選擇的值數組:

{
    "name": "uhuk",
    "email": "[email protected]",
    "message": "jgghhjb",
    "favorite_pet": [
    "Cats",
    "Birds"
    ]
}

注意: 你可以在 CodePen 上查看這個現場演示,它使用了所有主要的表單字段類型,並在提交時將數據生成為 JavaScript 對象。

結論

在本文中,我們了解瞭如何使用 FormData API 將表單數據轉換為 JavaScript 對象,而無需任何額外的依賴。我們還學習瞭如何正確處理各種類型的表單字段(輸入、文本區域等),以及一些更複雜的字段,例如復選框。


Tutorial JavaScript 教程
  1. JavaScript 中屬性和方法名稱的下劃線前綴

  2. 用 async/await 嚐嚐語法糖

  3. 使用 GraphQL 和錯誤邊界在 React 中自定義錯誤頁面

  4. 為搜索框自動完成創建反跳鉤

  5. 借助卡通理解 CSS Houdini 的指南

  6. 2022 年學習 Next.js 的 25 個資源

  7. 使用 Ethereum + React 的 Dapps 的建議資源?

  1. 如何在 contenteditable 元素中顯示之前操作圖像?

  2. 使用 Django 和 Chart.js 使用 API [第 3 部分]

  3. 返回關閉對話框

  4. 映射在學術研究中的 5 大用途📚

  5. 帶有自定義過濾器的 Javascript FullCalendar

  6. Javascript String includes() 方法 - 檢查一個字符串是否包含另一個字符串

  7. 使用 Github 操作將 React 庫發佈到 NPM 的完整工作流程指南

  1. React 如何處理數據

  2. 創建連接到 PostgreSQL 和 HarperDB 的 React/Node 應用程序

  3. 使用javascript從文檔中提取數據

  4. 讓我們在 <=30 分鐘內構建 Twitter 克隆