使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例
使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能
要求:寫一個省市區(qū)(或者年月日)的三級聯(lián)動,實現(xiàn)地區(qū)或時間的下拉選擇。
實現(xiàn)技術:php ajax
實現(xiàn):省級下拉變化時市下拉區(qū)下拉跟著變化,市級下拉變化時區(qū)下拉跟著變化。
使用chinastates表查詢
Ajax加載數據
1.這是chinastates表
2.做一個簡單php:Ajax_eg.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> <div class="sanji"> </div> </body> </html>
3.根據前一個頁面做jquery:Ajax_ssq.js
// JavaScript Document //當頁面內容都加載完才執(zhí)行 $(document).ready(function(e) { //加載三個下拉列表 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加載顯示數據 //1.加載省份 LoadSheng(); //2.加載市 LoadShi(); //3.加載區(qū) LoadQu(); //當省份選中變化,重新加載市和區(qū) $("#sheng").change(function(){ //當元素的值發(fā)生改變時,會發(fā)生 change 事件,該事件僅適用于文本域(text field),以及 textarea 和 select 元素。 //加載市 LoadShi(); //加載區(qū) LoadQu(); }) //當市選中變化,重新加載區(qū) $("#shi").change(function(){ //加載區(qū) 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); } }); } //加載區(qū)信息 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.再把數據庫連接起來 :load.php,把DBDA重新加載一個方法: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方法:執(zhí)行用戶給的sql語句,并返回相應的結果 $sql:用戶需要執(zhí)行的sql語句 $type:用戶需要執(zhí)行的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();//查詢語句返回二維(關聯(lián))數組 return json_encode($arr);//將數組轉換成json } } }
實現(xiàn)效果:
以上這篇使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- PHP+Mysql+Ajax+JS實現(xiàn)省市區(qū)三級聯(lián)動
- AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- ajax三級聯(lián)動下拉菜單效果
- jQuery ajax實現(xiàn)省市縣三級聯(lián)動
- ajax三級聯(lián)動的實現(xiàn)方法
- jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動效果簡單示例
- jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動(封裝和不封裝兩種方式)
- ajax實現(xiàn)無刷新省市縣三級聯(lián)動
- Ajax實現(xiàn)三級聯(lián)動效果
相關文章
destoon切換城市后實現(xiàn)logo旁邊顯示地區(qū)名稱的方法
這篇文章主要介紹了destoon切換城市后實現(xiàn)logo旁邊顯示地區(qū)名稱的方法,針對不同城市建設分站的時候很適用,需要的朋友可以參考下2014-08-08Win7 64位系統(tǒng)下PHP連接Oracle數據庫
項目中遇到一個問題,即怎么在Windows下連接Oracle進行開發(fā)。幾乎所有的例子都是基于Mysql的,Oracle的連接本身在Windows平臺下就顯得比較復雜。這里便長話短說,只記錄有用部分,希望對大家有所幫助2014-08-08