ホームページ > 記事 > バックエンド開発 > ThinkPHP と Ajax によるセカンダリ連携ドロップダウンメニュー

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

不言オリジナル: 2018-06-07 13:57:022233ブラウズ

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

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

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

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

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

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

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

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 コード:

 $(&#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:"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[&#39;type&#39;];
  $result = M(&#39;cate&#39;)->where(array(&#39;ca_pid&#39;=> $cate))->field(&#39;ca_id,ca_name&#39;)->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 サイトをご覧ください。

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

関連記事

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