code d'implémentation de liaison à trois niveaux ajax

code d'implémentation de liaison à trois niveaux ajax_lié à AJAX

微波

Libérer： 2017-06-28 13:58:06

original

1036 Les gens l'ont consulté

Cet article présente principalement en détail le code d'implémentation de la liaison ajax à trois niveaux, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec tout le monde l'ajax à trois niveaux. code de liaison. Le code spécifique pour l'affichage du lien est pour votre référence. Le contenu spécifique est le suivant

1. sanji.js

<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
<title>无标题文档</title>
</head>

<body>
<h1>三级联动</h1>
<p id="sanji"></p>

</body>
</html>

Copier après la connexion

3. La méthode

// JavaScript Document
$(document).ready(function(e) {
 //找到ID=SANJI的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:{pcode: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:{pcode: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:{pcode: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);
  }
 });
}

Copier après la connexion

dans la classe encapsulée référencée par chuli.php

<?php
//给一个父级代号，返回该父级代号下所有的子地区
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];


$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$pcode}&#39;";
echo $db->StrQuery($sql);

Copier après la connexion

renvoie une

chaîne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!