如何以 JSON 格式傳送表單資料？

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

製作 HTML 表單時，通常需要以 JSON 等結構化格式傳送資料。為了實現這一點，我們來探討如何將表單資料轉換為 JSON 物件並將其傳輸到伺服器。

將表單資料轉換為JSON（客戶端）

要將表單資料轉換為JSON 物件：

1. 使用JavaScript 的Form物件檢索表單資料（例如const formData = new FormData(form)）。
2. 迭代表單元素並將它們的值提取到 JSON 物件中（例如，let json = JSON.stringify(formData.entries())）。

範例：

< ;pre>

form.addEventListener("submit", function(e ) {

e.preventDefault();

const formData = new FormData(form);
const json = JSON.stringify(formData.entries());

});

設定標頭並將JSON 傳送到伺服器（伺服器端)

取得JSON 字串後，您可以使用XMLHttpRequest 或任何首選的網路請求方法將其發送到伺服器。請記得為JSON 資料設定適當的標頭：

<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br> <p><strong>範例（使用XMLHttpRequest）：</strong></p><p></p><pre class="brush:php;toolbar:false"><br>const xhr = new XMLHttpRequest();<br>xhr. "POST", "myUrl", true);<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br>xhr.send(json);<br> 

在伺服器上處理接收到的JSON 資料

在伺服器端，您可以將接收到的資料解析為JSON 物件並相應地存取其屬性。

範例（使用Node.js）：

<br>const body = request.body.toString();<br>const data = JSONSON .parse(body);<p>console.log(data.first_name);<br></p>

以上是如何以 JSON 格式傳送表單資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！