ajax 3 급 연동 의 실현 방법

ajax 는 3 급 연동 을 실현 합 니 다.작은 플러그 인 을 쓴 셈 입 니 다.사용 할 때 직접 가 져 와 서 사용 하면 됩 니 다.여 기 는 데이터베이스 에 있 는 chinastates 표를 사 용 했 습 니 다.

데이터 베 이 스 는 내용 이 매우 많 고 3 급 연동 안의 지역 이름 이 모두 안에 있 으 며 대명 부 대명 방식 을 사용한다.
예 를 들 어 베 이 징 이 죠.베 이 징 의 번 호 는 11 이 고 그 아래 의 베 이 징 시 부 번 호 는 11 입 니 다.베 이 징 시의 주 번 호 는 1101 입 니 다.베 이 징 시 아래 의 지역 부 번 호 는 1101 입 니 다.지역 을 바 꿀 때 주 번호 에 따라 그 와 같은 부 번 호 를 조회 하면 조회 할 수 있 습 니 다.
 3 단 연 결 된 내용 을 페이지 에 표시 하려 면 페이지 에 div 를 만 들 면 됩 니 다.

 
다음은 성 시내 이 세 열 을 고려 해 야 합 니 다.이 세 열 은 드 롭 다운 목록 을 사용 합 니 다.그러면 안 에는을 사용 해 야 합 니 다.js 와 jquery 로 써 야 하기 때문에 먼저 jquery 가방 과 js 파일 을 도입 한 다음 에 드 롭 다운 목록 세 개 를 쓰 는 것 을 고려 해 야 합 니 다.

 <script src="jquery-3.1.1.min.js"></script>
<script src="sanji.js"></script>

$(document).ready(function(e){
var str="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";  //          div  
$("#sanji").html(str);
  fullsheng();
  fullshi();
  fullqu();

  $("#sheng").change(function(){
    fullshi();
    fullqu();
  })
  $("#shi").change(function(){
    fullqu();
  })
  //      
  function fullsheng()
  {
    var pcode="0001";//         
    $.ajax({
      async:false, //       
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //      data    
        str="";
        for(var j in data)//js       for   
        {
          str +="<option value='"+data[j].AreaCode+"'>"+data[j].AreaName+"</option>";
        }
        $("#sheng").html(str);

      }

    })
  }
//      
  function fullshi()
  {
    var pcode=$("#sheng").val();
    $.ajax({
      async:false,
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //      data    
        str="";
        for(var j in data)//js       for   
        {
          str +="<option value='"+data[j].AreaCode+"'>"+data[j].AreaName+"</option>";
        }
        $("#shi").html(str);

      }

    })
  }
 //       
  function fullqu()
  {
    var pcode=$("#shi").val();
    $.ajax({
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //      data    
        str="";
        for(var j in data)//js       for   
        {
          str +="<option value='"+data[j].AreaCode+"'>"+data[j].AreaName+"</option>";
        }
        $("#qu").html(str);

      }

    })
  }



})

여 기 는 dataType:"JSON"전에"TEXT"JSON 을 사 용 했 어 요.  우리 가 사용 하 는 것 은 배열 입 니 다.그러면 우 리 는 배열 을 옮 겨 다 니 며 모든 데 이 터 를 가 져 와 야 합 니 다.js 에서 배열 을 옮 겨 다 니 는 것 은 for(){}입 니 다.
마지막 으로 말 해 야 할 것 은 페이지 를 처리 하 는 것 입 니 다.순수한 PHP 페이지 입 니 다.예전 에 dataType 은 JSON 을 사 용 했 기 때문에 페이지 출력 을 처리 하 는 것 도 하나의 배열 이 어야 합 니 다.그러면 처리 페이지 는 문자열 로 연결 할 수 없습니다.여기 서 저 는 데이터 베 이 스 를 호출 하 는 패 키 징 페이지 에 Json Query 방법 을 썼 습 니 다.

function JsonQuery($sql,$type=1)
{
   $db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);

    $result=$db->query($sql);
    if($type=="1")
    {
     $arr=$result->fetch_all(MYSQLI_ASSOC);
      return json_encode($arr);
    }
    else
    {
      return $result;
    }
}

 

그리고 처리 페이지 를 쓸 때 사용 하기 편 해 요.

<?php
$pcode=$_POST["pcode"];
include("DADB.class.php");
$db=new DADB();
$sql="select * from chinastates WHERE parentareacode='{$pcode}'";
echo $db->JsonQuery($sql);

이렇게 3 급 연동 을 완성 할 수 있다.아래 그림 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.