使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例

更新時間：2017年09月15日 08:29:57 作者：WORSHIP亞薩

下面小編就為大家?guī)硪黄褂肞HP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例。小編覺得挺不錯的，現(xià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加載數(shù)據(jù)

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.根據(jù)前一個頁面做jquery：Ajax_ssq.js

// JavaScript Document

//當頁面內(nèi)容都加載完才執(zhí)行
$(document).ready(function(e) {
 //加載三個下拉列表
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 
 //加載顯示數(shù)據(jù)
 //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";
 
 //根據(jù)父級代號查數(shù)據(jù)
 $.ajax({
    //取消異步，也就是必須完成上面才能走下面
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍歷數(shù)組，把它放入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();
 
 //根據(jù)父級代號查數(shù)據(jù)
 $.ajax({
    //取消異步，也就是必須完成上面才能走下面
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍歷數(shù)組，把它放入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();
 
 //根據(jù)父級代號查數(shù)據(jù)
 $.ajax({
    //不需要取消異步
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍歷數(shù)組，把它放入sj
      for(var k in data){
       str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";       
      }
      $("#qu").html(str);      
    }      
  }); 
}

4.再把數(shù)據(jù)庫連接起來 :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語句,并返回相應的結(jié)果
  $sql:用戶需要執(zhí)行的sql語句
  $type:用戶需要執(zhí)行的sql語句的類型
  return:如果是增刪語句改返回true或false,如果是查詢語句返回二維數(shù)組
  */
 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();//查詢語句返回二維數(shù)組
  } 
 }
 //此方法用于ajax中用于對取出的數(shù)據(jù)（二維數(shù)組）進行拼接字符串處理
 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();//查詢語句返回二維數(shù)組
   $str = "";
   foreach($arr as $v){
    $str = $str.implode("^", $v)."|";
   }
   $str = substr($str, 0,strlen($str)-1);
   return $str;
  } 
 } 
 //此方法用于ajax中用于返回為json數(shù)據(jù)類型時使用
 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))數(shù)組
   return json_encode($arr);//將數(shù)組轉(zhuǎn)換成json
  } 
 }
}

實現(xiàn)效果：

以上這篇使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Thinkphp5.0 框架Model模型簡單用法分析
這篇文章主要介紹了Thinkphp5.0 框架Model模型簡單用法,結(jié)合實例形式分析了thinkPHP5.0框架模型Model常用方法的簡單使用技巧,需要的朋友可以參考下
2019-10-10
Laravel框架實現(xiàn)多數(shù)據(jù)庫連接操作詳解
這篇文章主要介紹了Laravel框架實現(xiàn)多數(shù)據(jù)庫連接操作,結(jié)合實例形式詳細分析了Laravel框架連接2個數(shù)據(jù)庫的具體操作步驟與相關實現(xiàn)技巧,需要的朋友可以參考下
2019-07-07
用php實現(xiàn)選擇排序的解決方法
本篇文章介紹了，使用php實現(xiàn)選擇排序的解決方法。需要的朋友參考下
2013-05-05
使用Laravel中的查詢構(gòu)造器實現(xiàn)增刪改查功能
這篇文章主要介紹了使用Laravel中的查詢構(gòu)造器實現(xiàn)增刪改查功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
Laravel+jQuery實現(xiàn)AJAX分頁效果
這篇文章主要介紹了Laravel+jQuery實現(xiàn)AJAX分頁效果的方法,簡單介紹了jQuery的ajax調(diào)用結(jié)合Laravel控制器實現(xiàn)無刷新分頁功能的相關操作技巧,需要的朋友可以參考下
2016-09-09
php array_walk 對數(shù)組中的每個元素應用用戶自定義函數(shù)詳解
php array_walk函數(shù)將用戶自定義函數(shù)應用到 array 數(shù)組中的每個單元，即使用用戶自定義函數(shù)對數(shù)組中的每個元素做回調(diào)處理。本文章向大家講解array_walk函數(shù)的基本語法及使用實例,需要的朋友可以參考下
2016-11-11
Laravel學習教程之View模塊詳解
這篇文章主要給大家介紹了關于Laravel學習教程之View模塊的相關資料，文中通過示例代碼將View模塊介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-09-09
thinkphp連貫操作實例分析
這篇文章主要介紹了thinkphp連貫操作,以實例形式較為詳細的分析了連貫操作的具體用法及常用的方法含義,是非常實用的技巧,需要的朋友可以參考下
2014-11-11
Zend Framework分發(fā)器用法示例
這篇文章主要介紹了Zend Framework分發(fā)器用法,結(jié)合實例形式分析了Zend Framework分發(fā)器的功能、定義及簡單使用方法,需要的朋友可以參考下
2016-12-12
淺談php中urlencode與rawurlencode的區(qū)別
下面小編就為大家?guī)硪黄獪\談php中urlencode與rawurlencode的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09