如何優雅にフォームを送信する

ヒント：このヒントを見ると、現在の記事が元のemlogブログシステムから移行されたことを示しています。記事の公開日が非常に古く、レイアウトや内容が完全でない場合がありますので、ご了承ください。

フォームをエレガントに送信する方法

日付：2019-5-6 阿珏折腾代码浏览：1734 次コメント：1 条

これは非常に基本的な HTML フォームの送信の問題ですが、非常に実用的なテクニックです。
私のビジネスシナリオは次のようです：

動的に作成可能な input を持つフォーム、以下の図を参照してください

これは、input の name が固定ではないことを意味します。そうでないと、確実に上書きされます。

第一の方法、伝統的な通常の送信方法、送信する各 input に一意の name を付ける#

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="name1" />
        <input type="text" name="num1" />
        <input type="text" name="img1" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name2" />
        <input type="text" name="num2" />
        <input type="text" name="img2" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name3" />
        <input type="text" name="num3" />
        <input type="text" name="img3" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

ブラウザがキャプチャしたフォーマットは次のようになります

サーバーが取得し、印刷するデータは次のようになります。バックエンドのデータ処理は非常にフレンドリーではありません

第二の方法、配列を使用してフォームを送信する#

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="infos[1][name]" />
        <input type="text" name="infos[1][num]" />
        <input type="text" name="infos[1][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[2][name]" />
        <input type="text" name="infos[2][num]" />
        <input type="text" name="infos[2][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[3][name]" />
        <input type="text" name="infos[3][num]" />
        <input type="text" name="infos[3][img]" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

ブラウザとバックエンドが印刷するものは次のとおりです

注意深く観察すると、送信される name の値が変化し、同じになることに気付きます。配列？

バックエンドに送信すると、データが以前よりも整然となります
ただし、ここで注意する必要があるのは、送信される配列のキーに引用符を使用する必要はないことです。そうしないと、引用符もキーの一部になります。

もちろん、実際の場面では、次のような問題にも遭遇するかもしれません。送信するグループの数（上記の 1、2、3 のような）が確定していない場合、フロントエンドで自由に追加できる場合、どのようにしてこれらのコンテンツを配列で送信しますか？

以下は私のビジネスでの実際の解決策です

これにより、2 次元配列のキーを自分で管理する必要がなくなり、ブラウザが自動的に生成してくれます

バックエンドで受け取るデータは次のようになり、非常に簡単に処理できるようになりました

この方法は、関連するデータの不特定の数のグループを送信する必要がある場合に適用されます。
終わりに花を撒きます！~

ユーザーコメント：

Railgun 丶無限 2 年前 (2019-05-21)
新しいスキルを手に入れました√