この記事では、主に 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='cate' item='v'>
<option value="{$v['ca_id']}">{$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='"+data[i].ca_id+"'>"+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");
ネイティブ PHP リターン データ メソッド:
コードは次のとおりです:
//搜索结果为$result ..... echo json_encode($result);
これで 2 レベルのリンケージ ドロップダウン メニューの実装が完了しました。URL に注意してください。正しくなければならず、バックグラウンドで受信したときに戻り値がなければなりません。そうでない場合は、ajax 成功メソッドは実行されません。
以上がこの記事の全内容です。読んでいただきありがとうございます。詳細については PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
以上がThinkPHP と Ajax によるセカンダリ連携ドロップダウン メニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
