如何使用 AJAX 將表單資料作為 JSON 物件發送？

如何使用AJAX 將表單資料作為JSON 物件發送

當使用者提交HTML 表單時，您可能想要將其資料傳送到伺服器作為JSON物件方便處理。以下是如何使用AJAX 來實現此目的：

1. 建立表單並提交處理程序：

   定義一個帶有用於收集使用者的文字輸入欄位的HTML 表單資料。將 onclick 事件處理程序新增至處理表單提交的提交按鈕。

<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 type="submit" value="Submit" onclick="submitform()">
</form></code>

2. 在JavaScript 中擷取表單資料：

   在submitform()函數中，使用jery的serializeArray()方法以陣列形式擷取完整的表單資料：

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

3. AJAX具有JSON 內容類型的請求：

   AJAX具有JSON 內容類型的請求：

建立XMLHttpRequest 對象，指定POST 方法和端點URL，並將Content-Type 標頭設定為「application/json」：

<code class="javascript">var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');</code>

<code class="javascript">xhr.send(formData);</code>

發送JSON 編碼的資料：使用xhr.send() 將JSON 編碼的表單資料傳送到伺服器： 處理伺服器回應：實作onload 事件監聽器來處理伺服器回應並執行必要的操作，例如顯示成功訊息或重新導向到另一個頁面。 按照以下步驟，您可以將包含表單資料的 JSON 物件傳送到伺服器，以進行高效且多功能的處理。

以上是如何使用 AJAX 將表單資料作為 JSON 物件發送？的詳細內容。更多資訊請關注PHP中文網其他相關文章！