집 > 기사 > 웹 프론트엔드 > jquery와 ajax는 지방자치단체의 3단계 연계 캡슐화와 비캡슐화를 실현합니다.

jquery와 ajax는 지방자치단체의 3단계 연계 캡슐화와 비캡슐화를 실현합니다.

小云云원래의: 2018-01-12 09:26:302157검색

이 기사에서는 캡슐화 및 비캡슐화의 두 가지 방법을 포함하여 지방 자치단체의 3단계 연결을 구현하기 위한 jquery+ajax의 관련 코드를 주로 소개합니다. 그것이 모든 사람에게 도움이 되기를 바랍니다.

우선 아래와 같은 효과를 얻으려면

1. 생각을 명확히 하려면:

먼저 3개의 드롭다운 메뉴를 만듭니다.----값에 따라 두 번째 드롭다운 목록을 만듭니다. 첫 번째 드롭다운 메뉴 콘텐츠 중 세 번째 콘텐츠도 마찬가지입니다.

2. 사용된 데이터베이스 테이블: Chinastates 테이블

규칙: 국가 수준(중국)의 지역 코드를 기반으로 지방 수준(예: 베이징)을 쿼리합니다. 정부) 지방 수준의 지역 코드 기반); 지방자치단체 지역 코드를 기반으로 지구 수준(예: Dongcheng District)을 쿼리합니다.

첫 번째 방법: 캡슐화를 사용하지 않으며 데이터 읽기 속도가 느립니다. 두 번째 방법으로 캡슐화하는 것이 더 쉽도록 원리를 살펴볼 수 있습니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../jquery-1.11.2.min.js"></script>
 </head>
 <body>
 <select id="sheng"></select>
 <select id="shi"></select>
 <select id="qu"></select>
 </body>
</html>
<script type="text/javascript"> 
 $(document).ready(function(e){ 
 //输出省
 var code = "0001";
 $.ajax({ 
  async:false,
  //取消异步
  url:"chuli.php",
  data:{code:code},
  type:"POST",
  dataType:"TEXT",
  success:function(data){    
   var hang = data.trim().split("|"); //trim()去空格
   var str=""; 
   for(var i=0;i<hang.length;i++)
   {
   var lie = hang[i].split("^");
   str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);  
  }   
 });
//输出市
 $("#sheng").click(function(){ 
 var code2=$("#sheng").val(); 
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code2},
  type:"POST",
  dataType:"TEXT",
 success:function(data2){
 
  var hang2 = data2.trim().split("|");
 
  var str2 ="";
  for(var i=0;i<hang2.length;i++)
  {
   var lie2=hang2[i].split("^");
   str2 = str2 +"<option value =&#39;"+lie2[0]+"&#39;>"+lie2[1]+"</option>";
  }
  $("#shi").html(str2);
  }  
 }); 
 })
//输出区县
$("#shi").click(function(){
 var code3=$("#shi").val();
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code3},
  type:"POST",
  dataType:"TEXT",
  success:function(data3){
  var hang3 = data3.split("|");
  var str3 ="";
  for(var i=0;i<hang3.length;i++)
  {
   var lie3=hang3[i].split("^");
   str3 = str3 +"<option value =&#39;"+lie3[0]+"&#39;>"+lie3[1]+"</option>";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
</script>

기간 중에 발생한 문제: 각 드롭다운 목록의 첫 번째 데이터가 출력되지 않습니다. 각 드롭다운 목록의 첫 번째 데이터 값에 공백이 있기 때문입니다. ! ! ! 따라서 데이터를 출력할 때 공백을 제거해야 합니다! ! !

데이터가 반환하는 값에는 공백, 줄 바꿈 등이 포함될 수 있으므로, 공백을 제거하려면 Trim() 메서드를 사용하세요! ! !

두 번째 방법: 향후 언제든지 호출할 수 있는 플러그인으로 캡슐화합니다(중요)

(1) 메인 페이지:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title><br>//引入jquery包
 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
 <script src="sanji.js"></script>
 </head>
 <body><br>//id要与封装的js插件中一致
 <p id="sanji"></p>
 </body>
</html>

(2) 우리 자신의 캡슐화 js 플러그인

$(document).ready(function(e){
 //扔三个下拉列表到主页面建的p中
 $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>"); 
 //加载省的数据
 LoadSheng();
 //加载市的数据
 LoadShi();
 //加载区的数据
 LoadQu();
 //给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化
 $("#sheng").click(function(){
 LoadShi();
 LoadQu();
 }) 
 //给市的下拉列表添加点击事件，当市变化时，对应的区发生变化
 $("#shi").click(function(){
 LoadQu();
 })
 
});

//加载省的下拉列表
function LoadSheng() {
 var pcode = "0001";
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value=&#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#sheng").html(str);
 }
 });
}

//加载市省的下拉列表
function LoadShi() {
 var pcode = $("#sheng").val();
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#shi").html(str);
 }
 });
}

//加载省的下拉列表
function LoadQu() {
 var pcode = $("#shi").val();
 $.ajax({
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#qu").html(str);
 }
 });
}

두 번째는 페이지를 처리하는 것입니다(두 방법 모두에 사용됨): chuli.php

<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$code}&#39;";
$str=$db->strquery($sql);
echo $str;

마지막은 캡슐화된 클래스 파일입니다: DB.class.php

function strquery($sql)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 $result = $db ->query($sql);
 $arr =$result->fetch_all(); 
 $str="";
 foreach($arr as $v)
 {
 $str=$str.implode("^",$v)."|";
  }
 $str = substr($str,0,strlen($str)-1);
 return $str;
  }
}
?>

jquery와 ajax는 지방자치단체의 3단계 연계 캡슐화와 비캡슐화를 실현합니다.

관련 기사