ThinkPHP の使用体験の共有 - ThinkPHP + Ajax で 2 段階の連携を実現 ドロップダウン メニュー

最初はデータベースの設計です。分類テーブルは、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 コードは、最初のレイヤーのタイプが変更された後にトリガーされます。 1.url: バックグラウンドで受信する Ajax のアドレス。

2.データ: 送信 バックグラウンドへのデータは通常、json を使用して転送されます。ここで転送されるのは、選択したクラスの ID 値です。

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

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

5. 成功。 : 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 によって渡された第 1 レベルの選択されたコンテンツの ID を取得します。字幕クラスを取得し、ajaxReturn()でajaxに戻ります。戻りデータはjson形式で設定されているので、ajaxはjson形式でデータを受け取ります

ネイティブphp:

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

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

ThinkPHP の使用体験をさらに共有する - ThinkPHP + Ajax による 2 レベルのリンク ドロップダウン メニューの実装については、PHP 中国語 Web サイトの関連記事にご注目ください。

関連ラベル：

ThinkPHP Ajax

ソース：php.cn

前の記事：Yii2 フレームワーク学習メモ (4) -- 最初の Widget 次の記事：Yii2 フレームワーク学習メモ (5) -- バックエンドのスキンの変更

このウェブサイトの声明

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

著者別の最新記事

• HTMLで太字、斜体、下線、取り消し線などのフォント効果を設定する例の紹介
  1970-01-01 08:00:00
• Java バージョンの Redis を実装する
  1970-01-01 08:00:00
• 最も単純な WeChat アプレットのデモ
  1970-01-01 08:00:00
• Pythonでのpandas.DataFrameの簡単な操作方法（作成、インデックス、追加、削除）の紹介
  1970-01-01 08:00:00
• WeChat ミニ プログラム: タブ効果の実装方法の例
  1970-01-01 08:00:00
• Python は辞書構造の出力を美しくするためのカスタム メソッドを構築します
  1970-01-01 08:00:00
• HTML5: Canvas を使用してビデオをリアルタイムで処理する
  1970-01-01 08:00:00
• Asp.net は SignalR を使用して画像を送信します
  1970-01-01 08:00:00
• WeChat ミニ プログラム開発チュートリアル - App() および Page() 関数の概要
  1970-01-01 08:00:00
• Python Redisの使い方を詳しく解説
  1970-01-01 08:00:00

最新の問題

Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...

から 2024-04-04 22:16:18

0

1

1450

改訂されたタイトル: チェックボックスの選択に基づいて合計を計算する 私は単純な財務追跡アプリケーションを開発しています。アプリケーションには、すべての経費請求書が記載された表があり、合計金額は表の外側にあります。 JS または AJAX を使用して...

から 2024-04-04 13:45:50

0

1

3465

Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...

から 2024-04-04 09:29:39

0

1

397

AjaxからDjangoに複数のリストを渡す方法 問題があり、リストからすべてのデータを取得したいので、現在、['[objectObject]','[objectObject]を印刷するときに、選択した項目の各データをループしてデ...

から 2024-04-03 23:20:06

0

1

362

Ajax と PHP を使用して CodeIgniter に複数の画像ファイルをアップロードする 複数の画像ファイルをサーバー側にアップロードするのに問題があります。誰かがコードのどこが間違っているのかを指摘してくれると助かります。最初は HTML コードがあります: <...

から 2024-04-03 22:35:03

0

1

318

関連トピック

詳細>

• UIデザイナーとは何ですか?
• SQLplusを使用してデータベースに接続する方法
• ラテックスの使用法
• Linux における rm-rf コマンドは何を意味しますか?
• ワイヤレスネットワークカードが接続できない
• Xiaomi電話をフラッシュする方法
• インストールが失敗した場合にmongodbを完全に削除する方法
• C# での Base キーワードの使用法

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

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

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

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

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

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

  842511

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

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

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

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

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

  872538 回の学習

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

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

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

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

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

  20289 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

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

• [フォームボタン] 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 学習者の迅速な成長を支援します！