php+Mysql+Ajax+JS implémente l'exemple de code de liaison à trois niveaux entre les provinces et les municipalités-tutoriel php-php.cn

php+Mysql+Ajax+JS implémente l'exemple de code de liaison à trois niveaux entre les provinces et les municipalités

怪我咯

Libérer： 2023-03-13 11:46:01

original

1886 Les gens l'ont consulté

J'ai récemment travaillé sur un projet qui nécessitait un lien à trois niveaux entre les provinces et les municipalités. J'ai lu beaucoup d'informations sur Internet, j'ai donc proposé les idées et le code suivants

L'idée de base est la suivante. : créer dynamiquement un contrôle de sélection dans l'option JS, obtenir les informations sur la province et la ville obtenues à partir de la base de données SQL en PHP via Ajax Le code est un peu long, mais beaucoup d'entre eux sont similaires. Par exemple, les méthodes d'obtention des provinces, des villes. , et les districts en JS sont similaires. En PHP, différentes sélections sont exécutées via différentes instructions.

Code index.html :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市区三级联动</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="scripts/thumbnails.js" type="text/javascript"></script>
</head>
<body>
<p id="description">
<select style="width:100px; " onchange="sech(this.id)" id="sheng">
<option value="province">请选择省份</option>
</select>
<select onchange="sech(this.id)" id="shi">
<option value="city">请选择市区</option>
</select>
<select id="xian">
<option value="county">请选择县乡</option>
</select>
</p>
</p>
</body>
</html>

Copier après la connexion

Code Thumbnails.js :

Le code est le suivant :

window.onload = getProvince;

function createRequest() {//Ajax于PHP交互需要对象
  try {
    request = new XMLHttpRequest();//创建一个新的请求对象;
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}

function sech(id) {//省市改变时触发，select的onchange事件

    var aa = document.getElementById(id);
if(id=="sheng"){
      getCity(aa.value);//这里aa.value为省的id
}
if(id=="shi")
{
getCounty(aa.value);//这里aa.value为市的id
}

}

function getProvince() {//获取所有省
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=0";//ID=0时传递至PHP时让其获取所有省
  request.open("GET", url, true);
  request.onreadystatechange = displayProvince; //设置回调函数
  request.send(null);    //发送请求
}

function getCity(id){//获取省对应的市
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=" + escape(id);
  request.open("GET", url, true);
  request.onreadystatechange = displayCity;
  request.send(null);
}

function getCounty(id){//获取市对应的区
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=" + escape(id);
  request.open("GET", url, true);
  request.onreadystatechange = displayCounty;
  request.send(null);
}

 
function displayProvince() {//将获取的数据动态增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;//将PHP返回的数据赋值给b
 a=b.split(",");//通过","将这一数据保存在数组a中
  document.getElementById("sheng").length=1;
  var obj=document.getElementById("sheng&#39;);  
  for(i=0;i
      obj.options.add(new Option(a[i],i+1)); //动态生成OPTION加到select中，第一个参数为Text,第二个参数为Value值.

    }
  }
}

 
function displayCity() {//将获取的数据动态增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;
 a=b.split(",");
  document.getElementById("shi").length=1;//重新选择
  document.getElementById("xian").length=1;//重新选择
if(document.getElementById("sheng").value!="province"){
  var obj=document.getElementById(&#39;shi&#39;);  
  for(i=0;i
      obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。
}

    }
  }
}

function displayCounty() {//将获取的数据增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;
 a=b.split(",");
 document.getElementById("xian").length=1;
if(document.getElementById("sheng").value!="province"&&document.getElementById("shi").value!="city"){
  var obj=document.getElementById(&#39;xian&#39;);  
  for(i=0;i
      obj.options.add(new Option(a[i],i+1001)); 
}

    }
  }
}

Copier après la connexion

getDetails.Code php:

Le code est le suivant :

<?php
header("Content-Type: text/html; charset=gb2312");
$conn = new COM("ADODB.Connection") or die("Cannot start ADO");
$connstr = "Provider=SQLOLEDB;Persist Security Info=False;User ID=root;Password=123456;Initial Catalog=area;Data Source=localhost";
if($_REQUEST[&#39;ID&#39;]==0){//获得省列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from Province"; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$Province=array();
$i=0;
while (!$rs->EOF) {
$Province[$i]=$rs->Fields[&#39;name&#39;]->Value.",";
$rs->MoveNext();
$i++;
}
foreach($Province as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
if($_REQUEST[&#39;ID&#39;]>0&&$_REQUEST[&#39;ID&#39;]<35){//获得省对应的市列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from City where cid=".$_REQUEST[&#39;ID&#39;]; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$City=array();
$i=0;
while (!$rs->EOF) {
$City[$i]=$rs->Fields[&#39;name&#39;]->Value.",";
$rs->MoveNext();
$i++;
}
foreach($City as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
if($_REQUEST[&#39;ID&#39;]>100){//获得省市对应的县列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from County where cid=".$_REQUEST[&#39;ID&#39;]; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$County=array();
$i=0;
while (!$rs->EOF) {
$County[$i]=$rs->Fields[&#39;name&#39;]->Value.",";
$rs->MoveNext();
$i++;
}
foreach($County as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
?>

Copier après la connexion

Conception de la base de données, table Table Province, Table Ville, Tableau départemental.
Exigences : la table des provinces nécessite un identifiant et un nom, il est recommandé que l'identifiant soit compris entre 1 et 34, par exemple, l'identifiant de Pékin est 1, l'identifiant du Guangdong est 2, et ainsi de suite
La table des villes nécessite un identifiant, un nom et un cid ; , l'identifiant est cid* 100+1, le cid est le supérieur de la ville. Par exemple, le supérieur de Shenzhen est la province du Guangdong. Si le cid est 2, l'identifiant de Shenzhen est 201, et ainsi de suite.
La table County nécessite un identifiant, un nom et un cid. Comme il s'agit d'une relation à trois niveaux, l'identifiant peut être arbitraire. Il est recommandé de l'augmenter à partir de 10001. cid est le niveau supérieur, par exemple, le cid du district de Baoan est 201, et le cid du district de Longgang est également 201

Capture d'écran :

Effet HTML :

php+Mysql+Ajax+JS implémente l'exemple de code de liaison à trois niveaux entre les provinces et les municipalités