PHP+MYSQL+AJAX+JS realization of the provincial urban three-level linkage _php Tutorial

The basic idea is: in the JS dynamic creation of the Select control's option, through Ajax to obtain in PHP from the SQL database from the provincial and municipal information, the code is a bit long, but many are similar, such as JS in the province, city, district access method similar, Different SELECT statements are executed in PHP with different parameters.

Index.html Code:

Copy the Code code as follows:
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >


Three-level linkage between provincial and urban areas

Please select a province
Please select a city
Please select County Township

Thumbnails.js Code:

Copy CodeThe code is as follows:
Window.onload = getprovince;

function Createrequest () {//ajax requires object for PHP interaction
try {
Request = new XMLHttpRequest ();//Create a fresh Request object;
} 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) {//The onchange event of the Select when the provinces change

var AA = document.getElementById (ID);
if (id== "Sheng") {
Getcity (Aa.value);//Here Aa.value is the province's ID
}
if (id== "Shi")
{
Getcounty (Aa.value);//Here Aa.value is the city's ID
}

}

function Getprovince () {//Get all Provinces
Request = Createrequest ();
if (request = = null) {
Alert ("Unable to create request");
Return
}
var url= "Getdetails.php?id=0";//id=0 when passed to PHP to get all the provinces
Request.open ("GET", url, True);
Request.onreadystatechange = displayprovince; Setting the callback function
Request.send (NULL); Send Request
}

function getcity (ID) {//Get province-corresponding city
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) {//Get city-corresponding zone
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 () {//To dynamically increase the acquired data to select
if (request.readystate = = 4) {
if (Request.status = = 200) {
var a=new Array;
var b=request.responsetext;//assigns the data returned by PHP to B
A=b.split (",");//Through "," Save this data in array a
document.getElementById ("Sheng"). length=1;
var Obj=document.getelementbyid ("Sheng");
for (i=0;i
Obj.options.add (New Option (a[i],i+1)); Dynamically generated option is added to the Select, the first argument is text, and the second parameter is value.

}
}
}


function displaycity () {//To dynamically increase the acquired data to 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;//re-select
document.getElementById ("Xian"). length=1;//re-select
if (document.getElementById ("Sheng"). value!= "province") {
var obj=document.getelementbyid (' Shi ');
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 corresponds to the city's ID.
}

}
}
}

function Displaycounty () {//Adds the acquired data to the 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 (' Xian ');
for (i=0;i
Obj.options.add (New Option (a[i],i+1001));
}

}
}
}

getdetails.php Code:

Copy the Code code as follows:
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[' ID ']==0) {//Get list of provinces
$conn->open ($CONNSTR);//Establish database connection
$sqlstr = "Select name from province";// Set query string
$rs = $conn->execute ($SQLSTR);//execute query to get results
$num _cols = $rs->fields->count ();//Get Data set columns
$ Province=array ();
$i = 0;
while (! $rs->eof) {
$Province [$i]= $rs->fields[' name ']->value. ",";
$rs->movenext ();
$i + +;
}
foreach ($Province as $val)
Echo $val;
$conn->close ();
$rs = null;
$conn = null;
}

If ($_request[' id ']>0&&$_request[' id ']<35) {//Get a list of cities for the province
$conn->open ($CONNSTR);//Establish database connection
$sqlstr = "Select name from city where cid=". $_request[' ID '];//Set query string
$rs = $conn->execute ($SQLSTR);//Execute Query get Result
$num _cols = $rs->fields->count ();///Get Data Set column number
$City =array ();
$i = 0;
while (! $rs->eof) {
$City [$i]= $rs->fields[' name ']->value. ",";
$rs->movenext ();
$i + +;
}
foreach ($City as $val)
Echo $val;
$conn->close ();
$rs = null;
$conn = null;
}

if ($_request[' ID ']>100) {//Get a list of counties corresponding to provinces and cities
$conn->open ($CONNSTR); Establishing a database connection
$SQLSTR = "Select name from county where cid=". $_request[' ID ']; Set query string
$rs = $conn->execute ($SQLSTR); Execute query to get results
$num _cols = $rs->fields->count (); Get the number of data set columns
$County =array ();
$i = 0;
while (! $rs->eof) {
$County [$i]= $rs->fields[' name ']->value. ",";
$rs->movenext ();
$i + +;
}
foreach ($County as $val)
Echo $val;
$conn->close ();
$rs = null;
$conn = null;
}
?>

Database design, Table province table, City table, County table.
Requirements: Province table requires ID and name,id suggestions from 1 to 34, such as Beijing ID 1, Guangdong ID 2, etc.;
City table need id,name and cid,id for Cid*100+1,cid for the superior, such as Shenzhen's superior for Guangdong province, CID for 2, Shenzhen ID is 201, and so on.
County table needs id,name and CID, because it is a three-level relationship, the ID can be arbitrary, it is recommended to start from 10001 self-increment. CID is the superior, for example, the CID in Bao ' An district is 201, and the CID of Longgang District is 201;

：

HTML Effects:

Effect after completion:

Note: PHP is server-side, it is recommended to publish the website through the IP debugging.

http://www.bkjia.com/PHPjc/774993.html www.bkjia.com true http://www.bkjia.com/PHPjc/774993.html techarticle The basic idea is: in the JS dynamic creation of the Select control's option, through Ajax to obtain in PHP from SQL database information from the provinces and cities, the code is a bit long, but many are similar, such as JS in the province ...

