Ajaxを使用して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">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

ただし、このアプローチはフォーム入力から実際のデータを取得しないため失敗します。

解決案

この問題を解決する鍵は、完全なフォーム データを取得することにあります。これは、次のコードを使用して実現できます。

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

serializeArray() メソッドは、フォーム データをキーと値のペアの配列に変換します。この配列を JSON 文字列に変換することで、目的の JSON オブジェクトを取得できます。

Ajax との統合

Ajax を使用して JSON データを送信するには、次のコード:

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

ユーザーがフォームを送信すると、フォーム データを含む JSON オブジェクトが Ajax 経由で指定されたサーバー URL に送信されます。

このアプローチは便利な機能を提供します。 HTML フォーム データを JSON オブジェクトとして送信する効率的な方法により、Web アプリケーションの多用途性と機能性が向上します。

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