Using Ajax to write three-level linkage in provincial and urban areas

Source: Internet
Author: User

The project uses the database, here is saved, directly to the source code written up, detailed codes to

http://download.csdn.net/detail/huangjianxiang1875/4573883

Download the Include database here

showcities.php page

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" language= "JavaScript" >
Creating an AJAX engine
function Getxmlhttpobject () {
var XMLHttpRequest;
Different browsers get objects XMLHttpRequest object methods are different
if (window. ActiveXObject) {
Xmlhttprequest=new ActiveXObject ("Microsoft.XMLHTTP");
}else{
Xmlhttprequest=new XMLHttpRequest ();
}
return XMLHttpRequest;
}
var myxmlhttprequest= "";
function GetCities () {
Myxmlhttprequest=getxmlhttpobject ();
if (myxmlhttprequest) {
var url= "showcitiespro.php"; Post
var data= "provincecode=" +$ ("Sheng"). Value;
Myxmlhttprequest.open ("Post", url,true);
Myxmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Specifying callback Functions
Myxmlhttprequest.onreadystatechange=chuli;
Send
Myxmlhttprequest.send (data);
}
}
function Chuli () {
if (myxmlhttprequest.readystate==4) {
if (myxmlhttprequest.status==200) {
Window.alert (Myxmlhttprequest.responsexml);
Remove data from the server
var cities=myxmlhttprequest.responsexml.getelementsbytagname ("message");
$ ("City"). Length=0;
var myoption=document.createelement ("option");
Myoption.value=city_value;
myoption.innertext= "--Please choose the city-";
$ ("City"). AppendChild (myoption);
Traverse and remove the city
for (Var i=0;i<cities.length;i++) {

var City_name=cities[i].childnodes[0].childnodes[0].nodevalue;
var City_value=cities[i].childnodes[1].childnodes[0].nodevalue;
Create a new element option
var myoption=document.createelement ("option");
Myoption.value=city_value;
Myoption.innertext=city_name;
$ ("City"). AppendChild (myoption);
}

}
}
}


function $ (ID) {
return document.getElementById (ID);
}






function Getcounty () {
Myxmlhttprequest=getxmlhttpobject ();
if (myxmlhttprequest) {
var url= "showcitiespro.php"; Post
var data= "city=" +$ ("City"). Value;
Myxmlhttprequest.open ("Post", url,true);
Myxmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Specifying callback Functions
Myxmlhttprequest.onreadystatechange=chuli1;
Send
Myxmlhttprequest.send (data);
}
}
function Chuli1 () {
if (myxmlhttprequest.readystate==4) {
if (myxmlhttprequest.status==200) {
Window.alert (Myxmlhttprequest.responsexml);
Remove data from the server
var cities=myxmlhttprequest.responsexml.getelementsbytagname ("message");

$ ("county"). Length=0;
Traverse and remove the city
for (Var i=0;i<cities.length;i++) {
var City_name=cities[i].childnodes[0].childnodes[0].nodevalue;
var City_value=cities[i].childnodes[1].childnodes[0].nodevalue;
Create a new element option
var myoption=document.createelement ("option");
Myoption.value=city_value;
Myoption.innertext=city_name;
$ ("county"). AppendChild (myoption);
}

}
}
}


</script>


<body>
<select id= "Sheng" onchange= "getcities ()" >
<?php
$conn =mysql_connect ("localhost", "root", "");//Linked database
mysql_select_db ("novel");//Select Database
mysql_query ("Set names ' UTF8 '");/set Character set
$sql = "SELECT * from Province";//Query Database province table is province
$result =mysql_query ($sql);//Execute statement assignment to variable
?>
<option value= "" >---Province---</option>
<?php
while ($row =mysql_fetch_array ($result)) {
?>
<option value= "<?php echo $row [' Code '];? > "><?php echo $row [' name '];? ></option>
<?php
}
?>
</select>
<select id= "City" onchange= "Getcounty ()" >
<option value= "" >---City---</option>
</select>
<select id= "County" >
<option value= "" >---County---</option>
</select>
</body>


showcitiespro.php page

<?php
The first sentence tells the browser that the data returned is in XML format
Header ("Content-type:text/xml;charset=utf-8");
Tell the browser not to cache data
Header ("Cache-control:no-cache");

$provincecode =$_post[' Provincecode '];
$city =$_post[' city '];
File_put_contents ("A.txt", $province.)  \ r \ n ", file_append); The debug code can see the data that is received
$conn =mysql_connect ("localhost", "root", "");//Linked database
mysql_select_db ("novel");//Select Database
mysql_query ("Set names ' UTF8 '");/set Character set

$info = "";

if ($provincecode!= "") {
$sql = "SELECT * from city where provincecode= $provincecode";//Query Database province table is the province
$result =mysql_query ($sql);//Execute statement assignment to variable
$info. = "<province>";
while ($row =mysql_fetch_array ($result)) {
$info. = "<message><city>{$row [name]}</city><city>{$row [Code]}</city></message > ";
}
$info. = "</province>";
}else if ($city!= "") {
$sql = "SELECT * from area where citycode= $city";//Query Database province table is the province
$result =mysql_query ($sql);//Execute statement assignment to variable
$info. = "<province>";
while ($row =mysql_fetch_array ($result)) {
$info. = "<message><county>{$row [name]}</county><county>{$row [code]}</county></ Message> ";
}
$info. = "</province>";
}


File_put_contents ("A.txt", $info.) \ r \ n ", file_append);
Echo $info;
?>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.