配列
でのフォームの送信 今日、大量のフォーム情報を保存する必要があるという問題が発生しました。長い間悩んだ結果、フォーム内のデータを送信する非常に良い方法を見つけました。背景を配列形式で保存します。
実際、実装は非常に簡単です。つまり、フォームで送信する情報に名前を付けるときに特定の基準が必要です。まず、次の 2 つの方法の違いを比較してみましょう。
最初に一般的な方法で、送信される各値には名前が付いています
<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>
サービス (index.php) は 2 つの文と同じくらい単純です
<?phpecho "<pre class="brush:php;toolbar:false">";print_r($_GET);
レンダリングされた Web ページに次の情報を入力し、[送信] をクリックします
ブラウザーで表示されるクエリ文字列パラメータは次のとおりです
このような情報はサービス セグメント
で受信します。同じグループの 3 つの情報を配列に入れることができます。その方がはるかに簡単です。別の方法を見てみましょう
2 番目、フォーム送信用の配列メソッド
<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>
よく見ると、送信されるデータの名前が変更されていることがわかります。送信をクリックすると、バックエンドに渡される値がより明確になっていることがわかります。以下のスクリーンショットを見てください。
ブラウザのプラグインを通じて解析されたクエリ文字列は次のようになります。
サーバーによって出力されたデータは次のようになります。これ:
バックグラウンドでそのようなデータを受信すると、多くのものの処理と保存がはるかに簡単になります。 もちろん、ここで注意すべき点がまだあります。 . 、送信する値に名前を付けるときに配列に引用符を追加する必要はありません。引用符を追加すると、バックエンドのキー値に引用符が含まれることに注意してください。もう 1 つ注意すべき点は、現在、より一般的な方法は ajax 送信であることです。ajax で送信するときにフォームの値を取得するにはどうすればよいですか。これは実際には非常に簡単で、jquery が提供する Serialize() メソッドを使用すると、送信されるすべてのコンテンツを URL 文字列に簡単に結合し、get を通じてバックグラウンドに送信できます。
もちろん、実際にはこのような問題が発生する可能性があります。送信されるグループの数 (上記の 1、2、3 など) は、フロントエンドで自由に追加できます。この時点では、配列を使用してこれらのコンテンツを送信するのはどうでしょうか?これは、適切なソフトウェアを介して簡単かつ便利に解決できます。
<form id="form1" action="./index.php" method="get"> <div class="form-control"> <input type="text" name="infos[name][]" /> <input type="text" name="infos[num][]" /> <input type="text" name="infos[img][]" /> </div> <br> <div class="form-control"> <input type="text" name="infos[name][]" /> <input type="text" name="infos[num][]" /> <input type="text" name="infos[img][]" /> </div> <br> <div class="form-control"> <input type="text" name="infos[name][]" /> <input type="text" name="infos[num][]" /> <input type="text" name="infos[img][]" /> </div> ...... <input type="submit" value="Submit" /></form>
まず、ブラウザによって渡されたデータを確認します
この時、バックエンドが受け取るデータはこんな感じです
このようなデータがあると、各情報グループを分類するのが簡単です。この方法を使用する前は、このような問題が発生するたびに頭を痛めていましたが、今では簡単に解決できます。
この記事の著作権は作者に帰属します ([email protected])。記事を転載した後は、いかなる形式であっても転載することを禁止します。記事ページのわかりやすい位置に著者が原文にリンクされている必要があります。そうでない場合、著者は法的責任を追及する権利を留保します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
