PHP+Mysql+jQueryのクエリとリストボックスの選択操作例解説、jqueryサンプル解説

PHP+Mysql+jQueryのクエリとリストボックスの選択操作例解説、jqueryサンプル解説_PHPチュートリアル

WBOY

リリース： 2016-07-12 09:06:52

オリジナル

988 人が閲覧しました

PHP+Mysql+jQueryのクエリとリストボックスの選択操作例の説明、jqueryの例の説明

この記事では、Ajaxを介してmysqlデータをクエリし、返されたデータを待機リストに表示し、最後にオプションを追加する方法を説明します選択選択した領域に対して、多くのバックグラウンド管理システムで使用できます。この記事のリストボックスの操作は、jquery プラグインに依存しています。

HTML

リーリー

説明すると、HTML コンテンツはフォームであり、クエリ入力ボックス、リストボックス、および関連ボタンが含まれています。

MYSQL データテーブル構造

リーリー

テーブル t_mult は、名前と携帯電話番号フィールドを含む連絡先情報テーブルです。

CSS

リーリー

この例では、Multiselect プラグインに必要なスタイルファイルのみが読み込まれています。他の CSS は自分でデザインできます。
JAVASCRIPT
まず、この例に必要な 2 つの js ファイルを参照する必要があります。

リーリー

次に、Multiselect プラグインを呼び出しましょう。

リーリー

次に、Ajax クエリデータを実行するための検索ボタンを作成しましょう。

リーリー

説明、検索ボタンをクリックすると、Ajax 非同期操作が実行され、取得した検索ボックスの入力値が POST モードでバックグラウンドプログラムの action.php に渡されて処理され、別の結果が返されます。 JAVASCRIPT が 1 を返す場合、HTML ページに「レコードなし」というプロンプトが表示されます。それ以外の場合は、結果が左側のリストボックス (選択対象) に出力されます。注意ここが重要なポイントですなぜリストボックスがXHTMLのliOptionではなく、liOptionms2side__sxに変更されたのでしょうか？ これは、Multiselect プラグインから始まります。Multiselect プラグインは、実際には、関連する操作のためにリストボックスを左右 2 つのリストボックスに置き換えます。プラグインコードを見ると、見つけるのは難しくありません。左側の名前は liOptionms2side__sx、右側のリストボックスの名前は liOptionms2side__sx です (選択された) リストボックスの名前は liOptionms2side__dx です。これは後で使用します。

PHP

まずはaction.phpの処理を見てみましょう。
最初のステップはデータベースに接続することです。

リーリー

2 番目のステップは、データを読み取って出力することです。 検索ボックスから値を検出して、さまざまな SQL ステートメントを構築し、出力用のデータを返します。コードは次のとおりです。
リーリー

最後に、送信操作、バックグラウンドの post.php プログラムがあり、最終的に送信されたアイテムの値を取得します。

リーリー

取得するのは、liOption の値ではなく、右側のリストボックスの liOptionms2side__dx の値であることに注意してください。

クエリと操作の例は実装されましたが、選択された領域にアイテムを追加する際に、追加されたアイテムが再度追加できないことをどのように判断して制御するかは、皆さんの考えに委ねられています。試してみてください。