フォームデータをJSON形式で送信するにはどうすればよいですか?

フォーム データを JSON オブジェクトとして送信する方法

HTML フォームを作成する場合、多くの場合、データを JSON などの構造化形式で送信する必要があります。 。これを容易にするために、フォーム データを JSON オブジェクトに変換してサーバーに送信する方法を見てみましょう。

フォーム データを JSON に変換する (クライアント側)

フォーム データを JSON オブジェクトに変換するには:

1. JavaScript の FormData オブジェクトを使用してフォーム データを取得します (例: const formData = new FormData(form))。
2. フォーム要素を反復処理します。そして、それらの値を JSON オブジェクトに抽出します (例: let json = JSON.stringify(formData.entries()))。

例:

< ;pre>

ヘッダーの設定とサーバーへの JSON の送信 (サーバー側) )

JSON 文字列を取得したら、XMLHttpRequest または任意の優先ネットワーク要求メソッドを使用してサーバーに送信できます。 JSON データに適切なヘッダーを忘れずに設定してください:

<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br>&lt ;/pre></p>
<p><strong>例 (XMLHttpRequest を使用する):</strong></p>
<p><pre class="brush:php;toolbar:false"><br>const xhr = new XMLHttpRequest();<br>xhr.open( "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 = JSON.parse(body);</p>
<p>console.log(data.first_name);<br>

以上がフォームデータをJSON形式で送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。