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">function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}</code>

しかし、このアプローチは重要な問題により不十分です。欠陥。フォームからデータを取得する代わりに、サンプル JSON オブジェクトを手動で作成しました。これを修正するには、フォーム データを動的に収集する必要があります。

解決策は、jQuery の機能を利用してフォーム データを配列として抽出し、それを JSON 文字列に変換することです。

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

このコード行は、フォームからすべてのデータを効果的にキャプチャし、目的の JSON 形式に変換します。この JSON 文字列を AJAX リクエストで利用することも、AJAX がオプションでない場合は、それを非表示のテキストエリアに組み込んで従来どおりフォームを送信することもできます。

さらに、データを JSON 文字列として送信する場合は、標準の HTML フォーム経由では、配列形式の個々のデータ ポイントにアクセスするにはサーバー側でデコードする必要があることに注意してください。

このアプローチに従うことで、HTML フォームから JSON オブジェクトを簡単に送信できます。 、シームレスなデータ送信と効率的なサーバー通信を保証します。

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