ホームページ >バックエンド開発 >PHPチュートリアル >PHP+MySql+Ajax+jQueryの組み合わせで道市の3階層連携機能を実現
以下のエディタでは、PHP+MySql+Ajax+jQueryを使用して、道州市の3階層連携機能を実現する例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして一緒に見てみましょう
PHP+MySql+Ajax+jQueryを使って、道と市区町村の3段階連携機能を実現しましょう
要件:道と市区町村の3段階連携を書く(または年、月、日)を選択して、地域または時刻をドロップダウンで選択します。
実装テクノロジー: php ajax
実装: 地方のドロップダウンが変更されると、それに応じて都市のドロップダウン領域も変更され、都市レベルのドロップダウンが変更されると、それに応じてゾーンのドロップダウンも変更されます。
chinastates テーブル クエリ
Ajax を使用してデータをロードします
1. これは chinastates テーブルです
2。 php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> </head> <style> .sanji{ margin-left: 550px; margin-top: 150px; } </style> <body> <p class="sanji"> </p> </body> </html>
3. 前のページに基づいて jquery を作成します: Ajax_ssq.js
// JavaScript Document //当页面内容都加载完才执行 $(document).ready(function(e) { //加载三个下拉列表 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载显示数据 //1.加载省份 LoadSheng(); //2.加载市 LoadShi(); //3.加载区 LoadQu(); //当省份选中变化,重新加载市和区 $("#sheng").change(function(){ //当元素的值发生改变时,会发生 change 事件,该事件仅适用于文本域(text field),以及 textarea 和 select 元素。 //加载市 LoadShi(); //加载区 LoadQu(); }) //当市选中变化,重新加载区 $("#shi").change(function(){ //加载区 LoadQu(); }) }); //加载省份信息 function LoadSheng() { //取父级代号 var pcode ="0001"; //根据父级代号查数据 $.ajax({ //取消异步,也就是必须完成上面才能走下面 async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍历数组,把它放入sj for(var k in data){ str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>"; } $("#sheng").html(str); } }); } //加载市信息 function LoadShi() { //取父级代号 var pcode =$("#sheng").val(); //根据父级代号查数据 $.ajax({ //取消异步,也就是必须完成上面才能走下面 async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍历数组,把它放入sj for(var k in data){ str=str+"<option value='"+data[k].[0]+"'>"+data[k].[0]+"</option>"; } $("#shi").html(str); } }); } //加载区信息 function LoadQu() { //取父级代号 var pcode =$("#shi").val(); //根据父级代号查数据 $.ajax({ //不需要取消异步 url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍历数组,把它放入sj for(var k in data){ str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>"; } $("#qu").html(str); } }); }
4. 次に、メソッド: JsonQuery
を使用してデータベースを接続します。
<?php $pcode = $_POST["pcode"]; require_once "./DBDA.class.php"; $db = new DBDA(); $sql = "select * from chinastates where parentareacode='{$pcode}'"; echo $db->JsonQuery($sql,0);
パッケージングクラス
<?php class DBDA{ public $host="localhost"; public $uid="root"; public $pwd=""; public $dbname="0710_info"; /* query方法:执行用户给的sql语句,并返回相应的结果 $sql:用户需要执行的sql语句 $type:用户需要执行的sql语句的类型 return:如果是增删语句改返回true或false,如果是查询语句返回二维数组 */ public function query($sql,$type=1){//默认true为增删改 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); if(mysqli_connect_error()){ return "连接失败!"; } $result = $db->query($sql); if($type==1){ return $result;//增删改语句返回true或false }else{ return $result->fetch_all();//查询语句返回二维数组 } } //此方法用于ajax中用于对取出的数据(二维数组)进行拼接字符串处理 public function StrQuery($sql,$type=1){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); if(mysqli_connect_error()){ return "连接失败!"; } $result = $db->query($sql); if($type==1){ return $result;//增删改语句返回true或false }else{ $arr = $result->fetch_all();//查询语句返回二维数组 $str = ""; foreach($arr as $v){ $str = $str.implode("^", $v)."|"; } $str = substr($str, 0,strlen($str)-1); return $str; } } //此方法用于ajax中用于返回为json数据类型时使用 public function JsonQuery($sql,$type=1){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); if(mysqli_connect_error()){ return "连接失败!"; } $result = $db->query($sql); if($type==1){ return $result;//增删改语句返回true或false }else{ $arr = $result->fetch_all();//查询语句返回二维(关联)数组 return json_encode($arr);//将数组转换成json } } }
達成効果:
以上がPHP+MySql+Ajax+jQueryの組み合わせで道市の3階層連携機能を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。