HTMLフォームデータを介してJSONオブジェクトを送信するにはどうすればよいですか?

HTML フォーム データを介した JSON オブジェクトの送信

フォームを送信するとき、データは通常、個別のフォーム フィールドとして送信されます。ただし、データを JSON オブジェクトとして送信する場合は、次のメソッドを利用できます。

メソッド 1: FormData 配列シリアル化

jQuery の SerializeArray() を使用してフォーム データを配列に変換します。

var formData = JSON.stringify($("#myForm").serializeArray());

方法 2: 隠しテキスト領域

フォーム内に隠しテキスト領域を作成し、その値を JSON 文字列化されたフォーム データに設定します。このメソッドを使用すると、フォーム送信後にサーバー側のデータにアクセスできます。

<input type="hidden" name="data" value='{"first_name":"binchen","last_name":"heris"}'>

サーバー側デコード

JSON データが通常のフォーム送信の一部として送信される場合、サーバー側でデコードする必要があります。たとえば、PHP の場合:

$data = json_decode($_POST['data']);

XHR エラー解決

コード内で、Content-Type ヘッダーを application/json に明示的に設定しないことが問題の原因である可能性があります。修正されたコードは次のようになります:

xhr.setRequestHeader('Content-Type', 'application/json');

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