ホームページ バックエンド開発 PHPチュートリアル ThinkPHP と Ajax によるセカンダリ連携ドロップダウン メニュー

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

Jun 07, 2018 pm 01:57 PM
ajax thinkphp

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

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

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

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

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

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

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

HTML コード:

&lt;select name=&quot;type&quot; size=&quot;1&quot; id=&quot;type&quot;&gt;
    &lt;option&gt;请选择类型&lt;/option&gt;
     &lt;foreach name=&#39;cate&#39; item=&#39;v&#39;&gt;
         &lt;option value=&quot;{$v[&#39;ca_id&#39;]}&quot;&gt;{$v.ca_name}&lt;/option&gt;
     &lt;/foreach&gt;
 &lt;/select&gt;
 标签:
 &lt;select name=&quot;lable&quot; size=&quot;1&quot; id=&quot;lables&quot;&gt;
 &lt;/select&gt;
ログイン後にコピー

Ajax コード:

 $(&#39;#type&#39;).click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr(&#39;id&#39;);
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:&quot;POST&quot;,
                    url:site.web+&quot;lable&quot;,
                    dataType:&quot;json&quot;,
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+&quot;lable&quot;);
                    },
                    success:function(data){
                        $(&quot;#lables&quot;).empty();
                        var count = data.length;
                        var i = 0;
                        var b=&quot;&quot;;
                           for(i=0;i&lt;count;i++){
                               b+=&quot;&lt;option value=&#39;&quot;+data[i].ca_id+&quot;&#39;&gt;&quot;+data[i].ca_name+&quot;&lt;/option&gt;&quot;;
                           }
                        $(&quot;#lables&quot;).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[&#39;type&#39;];
  $result = M(&#39;cate&#39;)-&gt;where(array(&#39;ca_pid&#39;=&gt; $cate))-&gt;field(&#39;ca_id,ca_name&#39;)-&gt;select();
  $this-&gt;ajaxReturn($result,&quot;JSON&quot;);
ログイン後にコピー

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 サイトの他の関連記事を参照してください。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

thinkphpプロジェクトの実行方法 thinkphpプロジェクトの実行方法 Apr 09, 2024 pm 05:33 PM

thinkphpプロジェクトの実行方法

thinkphp にはいくつかのバージョンがあります thinkphp にはいくつかのバージョンがあります Apr 09, 2024 pm 06:09 PM

thinkphp にはいくつかのバージョンがあります

thinkphpの実行方法 thinkphpの実行方法 Apr 09, 2024 pm 05:39 PM

thinkphpの実行方法

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

jQuery AJAX リクエストで発生した 403 エラーを解決する方法

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery AJAXリクエスト403エラーを解決する方法

thinkphpのインストール方法 thinkphpのインストール方法 Apr 09, 2024 pm 05:42 PM

thinkphpのインストール方法

laravelとthinkphpではどちらが優れていますか? laravelとthinkphpではどちらが優れていますか? Apr 09, 2024 pm 03:18 PM

laravelとthinkphpではどちらが優れていますか?

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?

See all articles