如何從 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">function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}</code>

但是，由於一個關鍵的問題，這種方法有缺陷缺陷。您沒有從表單中檢索數據，而是手動建立了一個範例 JSON 物件。為了修正這個問題，我們需要動態收集表單資料。

解決方案在於利用jQuery 的強大功能將表單資料提取為數組，然後我們可以將其轉換為JSON 字串：

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

這行程式碼有效地捕獲了表單中的所有資料並將其轉換為所需的JSON 格式。然後，您可以在 AJAX 請求中使用此 JSON 字串，或者，如果 AJAX 不是一個選項，則將其合併到隱藏的文字區域並以傳統方式提交表單。

此外，如果您將資料作為 JSON 字串傳輸通過標準 HTML 表單，請注意它需要在伺服器端進行解碼才能以數組格式存取各個資料點。

透過遵循此方法，您可以輕鬆地從 HTML 表單發送 JSON 對象，確保無縫資料傳輸和高效的伺服器通訊。

以上是如何從 HTML 表單資料製作 JSON 物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！