如何使用 Ajax 將 HTML 表單資料傳輸為 JSON？

使用 HTML 表單資料傳輸 JSON 資料

在 Web 開發領域，經常需要將資料從 HTML 表單傳輸到伺服器。雖然存在傳統方法，但本文探討了另一種方法：將表單資料作為 JSON 物件傳送。

挑戰

假設您有一個包含以下內容的HTML 表單結構：

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

目標是當使用者點擊「提交」按鈕時，將輸入此表單的資料以JSON 物件傳送。

初始錯誤

有些人可能會嘗試使用此程式碼：

<code class="javascript">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

但是，此方法會失敗，因為它無法從表單輸入中檢索實際資料。

解決方案

解決此問題的關鍵在於取得完整的表單資料。這可以使用以下程式碼來實現：

<code class="javascript">var formData = JSON.stringify($("#myForm").serializeArray());</code>

serializeArray() 方法將表單資料轉換為鍵值對數組。透過將此陣列轉換為 JSON 字串，我們就可以獲得所需的 JSON 物件。

與Ajax 整合

要使用Ajax 傳輸JSON 數據，可以使用下面的程式碼：

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

現在，當使用者提交表單時，包含表單資料的JSON 物件將透過Ajax 傳送到指定的伺服器URL。

這種方法提供了一種方便的方式將 HTML 表單資料作為 JSON 物件發送的有效方法，增強 Web 應用程式的多功能性和功能。

以上是如何使用 Ajax 將 HTML 表單資料傳輸為 JSON？的詳細內容。更多資訊請關注PHP中文網其他相關文章！