도, 자치단체 3단계 연계 기능 구현 예시 (php+MySql+Ajax+jQuery)-PHP 튜토리얼-php.cn

도, 자치단체 3단계 연계 기능 구현 예시 (php+MySql+Ajax+jQuery)

黄舟

풀어 주다： 2023-03-16 07:32:02

원래의

2316명이 탐색했습니다.

아래 편집기는 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=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></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=&#39;"+data[k].[0]+"&#39;>"+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=&#39;"+data[k].[0]+"&#39;>"+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=&#39;"+data[k].[0]+"&#39;>"+data[k].[1]+"</option>";       
      }
      $("#qu").html(str);      
    }      
  }); 
}

로그인 후 복사

4 그런 다음 데이터베이스를 연결합니다: load.php, JsonQuery

메소드로 DBDA를 다시 로드합니다.

<?php
$pcode = $_POST["pcode"];
require_once "./DBDA.class.php";
$db = new DBDA();

$sql = "select * from chinastates where parentareacode=&#39;{$pcode}&#39;";
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
  } 
 }
}

로그인 후 복사

성취 효과: