ThinkPHP と Ajax によるセカンダリ連携ドロップダウン メニュー

この記事では、主に ThinkPHP と Ajax 間の二次連携のドロップダウン メニューを紹介します。これは、必要な友人に共有することができます。

連携のデータの存在。メニューでは、コードを変更することなく、データベースを追加、削除、変更することで、いつでもメニュー データを変更できます。同時に、レベル 2 を達成した後、レベル 3 およびレベル 4 を達成することもできます。 。 。 。関連メニューをお待ちください

最初はデータベースの設計です。分類テーブルは、cate と呼ばれます。

私が行っているのは、分類されたデータの第 2 レベルのリンクです。データに必要なフィールドは、id、name (中国名)、pid (親 ID) です。

親 ID の設定: データに上位階層がない場合、親 ID は 0 です。上位階層がある場合、親 ID は上位階層の ID になります。

データベースにコンテンツが追加されたら、セカンダリ リンケージを実装するコードの作成を開始できます。

まず、バックグラウンド PHP で pid 0 のすべてのデータを取得し、それを $cate に保存し、次に foreach ループを使用して最初のレイヤーの に出力します。

HTML コード:

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name=&#39;cate&#39; item=&#39;v&#39;>
         <option value="{$v[&#39;ca_id&#39;]}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签：
 <select name="lable" size="1" id="lables">
 </select>

Ajax コード:

 $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value=&#39;"+data[i].ca_id+"&#39;>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax コードは、最初のレイヤーのタイプが変更された後にトリガーされます。ajax メソッドの主なパラメーターは次のとおりです。

1 .url: バックグラウンドで ajax を受信するためのアドレス;

2.data: バックグラウンドに渡されるデータは通常、json で渡されます。 。

3.type: transfer メソッド。get メソッドと post メソッドがあります。私は通常、get よりも多くのデータを送信でき、より安全な post を使用します。

4.error: ajax 実行。失敗メソッド;

5.success: ajax の実行が成功したためのメソッド。これはコールバック関数です。ここで成功を実行するときは、まず empty() を使用して 2 番目のドロップダウン メニューの内容をクリアし、次にバックグラウンドから取得したデータを出力します。

以下は、Thinkphp が ajax データを受信して​​処理するページです。

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Thinkphp の I() メソッドは、渡された最初のレイヤーの選択を取得するために、実際には $_POST[] と見なすことができます。 ajax でコンテンツの ID を取得し、ajaxReturn() を使用して ajax に返します。ここでは、戻りデータが json 形式で設定されているため、ajax は json 形式でデータを受け取ります。

ネイティブ PHP リターン データ メソッド:

コードは次のとおりです:

  //搜索结果为$result
   .....
   echo json_encode($result);

これで 2 レベルのリンケージ ドロップダウン メニューの実装が完了しました。URL に注意してください。正しくなければならず、バックグラウンドで受信したときに戻り値がなければなりません。そうでない場合は、ajax 成功メソッドは実行されません。

以上がこの記事の全内容です。読んでいただきありがとうございます。詳細については PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

PHP で実装されたリアルタイム メッセージ プッシュ機能 [アンチ Ajax プッシュに基づく]

Ajax を使用して Thinkphp でリフレッシュフリーのページングを実装する方法

以上がThinkPHP と Ajax によるセカンダリ連携ドロップダウン メニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

ajax thinkphp

ソース：php.cn

前の記事：PHP画像ファイル操作のカプセル化クラス 次の記事：PHPデザインパターンの基礎知識と応用

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• プログラミングとは何ですか?
  2019-04-16 16:04:28
• 検索のショートカットキーはctrlキーとwhatキーです。
  2020-09-15 11:26:00
• カットのショートカットキーctrlには何が追加されるのでしょうか？
  2020-09-10 14:26:14
• それは何の職業ですか？
  2020-09-08 11:06:15
• Ctrl+キーを押すと何が保存されますか?
  2020-09-09 09:46:36
• ctrl+tのショートカットキーは何ですか?
  2020-10-12 14:51:04
• PS定規の使い方は？
  2020-09-10 14:40:02
• プログラミング学習に向いている人は？
  2019-04-24 16:20:55
• PSの逆選択のショートカットキーは何ですか？
  2020-10-13 11:40:03
• 2つのインライン要素の間に改行を追加する方法
  2019-04-15 14:06:21

最新の問題

Composer 経由で Workman をインストールするときにダウンロードに失敗した場合はどうすればよいですか?他のプラグインをダウンロードするときにもエラーが発生します。 D:\phpstudy_pro\WWW\tpShop\thinkphp>composer require topthink/think-worker=2.0.*./compo...

から 2023-08-25 17:04:18

0

0

131

ファイルをダウンロードするときに現在のページを閉じる方法 正常にダウンロードするには、thinkphp を使用します。ダウンロードまたはキャンセルした後に現在のページを閉じるにはどうすればよいですか?

から 2023-05-08 21:54:29

0

2

376

XAMPP 環境で thinkphp を実行するにはどうすればよいですか? ? インターネットでいろいろ調べても理解できませんでした。このサイトにはこの分野の紹介がないようですが、構築方法についてのチュートリアルはありますか? ? ? ? ? ? ? ? ? ...

から 2023-05-02 20:43:39

0

3

346

日付型データを挿入するときに thinkphp エラーが発生する 日付型データの挿入時の thinkphp エラー: 無効な日時形式: 1292 不正な日付値: 行 1 の列 'jfrq' の '2023-03-17T16:00:00.000Z'

から 2023-03-18 06:44:10

0

1

335

thinkphpのページングランキングフィールドの並べ替えの問題 $model->order('ranking', 'asc')->page($page, $limit)->select()->toArray(); 昇順ラ...

から 2022-10-26 17:03:51

0

0

315

関連トピック

詳細>

• ajax チュートリアル
• Ajax 中国語文字化けコードの解決策
• ajaxで中国語の文字化けが送信された場合の対処方法
• thinkphpとlaravelではどちらが簡単ですか?
• thinkphpのパフォーマンスはどうですか?
• PythonでExcelファイルからデータを読み取る方法
• recvとrecvfromの違い
• 李って何の元素？

人気のおすすめ

• Mac コンピュータでホストをセットアップする方法 (画像とテキスト付きの手順)
• PHP を使用してシンプルな QQ ロボットをすばやく構築する
• API共通の署名検証方法（PHP実装）
• PHP における一般的な日付と時刻の操作のコレクション
• PHP はグラフィック検証コードを生成します (拡張干渉タイプ)

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1403071
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4230882
• 
  JAVA 初心者向けビデオチュートリアル

  2418368
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  498149
• 
  PHP ゼロベースの入門チュートリアル

  833974

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1403071 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2418368 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  498149 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  214173 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  858886 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  4673 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  3620 回の学習
• 
  Go言語実践GraphQL

  3110 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  559 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  16086 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！