Using Php+mysql+ajax+jquery to realize the three-level linkage function of the provincial urban area
Requirement: Write a three-level linkage between provinces and cities (or months and days) to achieve the drop-down selection of the region or time.
Implementation technology: PHP Ajax
Implementation: The provincial pull-down changes when the pull-down region of the city pull down followed by changes, the city-level pull changes time zone pull followed by changes.
Querying using the Chinastates table
Ajax Loading Data
1. This is the Chinastates table
2. Make a simple php:Ajax_eg.php
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= "Bootstrap/js/jquery-1.11.2.min.js" ></script>
<style>
. sanji{
margin-left:550px;
margin-top:150px;
}
</style>
<body>
<div class= "Sanji" > </div>
</body>
3. Do jquery:Ajax_ssq.js on the previous page
JavaScript Document
Executes when the page content is loaded
$ (document). Ready (function (e) {
Load three drop-down lists
$ ("#sanji"). HTML ("<select id= ' sheng ' ></select><select id= ' shi ' ></select><select id= ' qu ' ></select> ');
Load Display data
1. Loading Provinces
Loadsheng ();
2. Loading City
Loadshi ();
3. Loading Zone
Loadqu ();
When the provinces are selected to change, reload the city and the district
$ ("#sheng"). Change (function () {///when the value of an element is changed, an event occurs, which applies only to the text field, as well as to the textarea and select elements.
Loading City
Loadshi ();
Loading zone
Loadqu ();
})
When the city is selected to change, reload the zone
$ ("#shi"). Change (function () {
Loading zone
Loadqu ();
})
});
Loading province information
function Loadsheng ()
{
Take the parent code
var pcode = "0001";
Check data based on parent code
$.ajax ({
Cancel Async, that is, you must complete the above to go below
Async:false,
URL: "load.php",
Data:{pcode:pcode},
Type: "POST",
DataType: "JSON",
Success:function (data) {
var str= "";
Iterate through the array and put it in SJ
For (var k in data) {
str=str+ "<option value= '" +data[k]. [0]+ ' > ' +data[k]. [1]+ "</option>";
}
$ ("#sheng"). html (str);
}
});
}
Loading City information
function Loadshi ()
{
Take the parent code
var pcode =$ ("#sheng"). Val ();
Check data based on parent code
$.ajax ({
Cancel Async, that is, you must complete the above to go below
Async:false,
URL: "load.php",
Data:{pcode:pcode},
Type: "POST",
DataType: "JSON",
Success:function (data) {
var str= "";
Iterate through the array and put it in SJ
For (var k in data) {
str=str+ "<option value= '" +data[k]. [0]+ ' > ' +data[k]. [0]+ "</option>";
}
$ ("#shi"). html (str);
}
});
}
Load zone information
function Loadqu ()
{
Take the parent code
var pcode =$ ("#shi"). Val ();
Check data based on parent code
$.ajax ({
No need to cancel Async
URL: "load.php",
Data:{pcode:pcode},
Type: "POST",
DataType: "JSON",
Success:function (data) {
var str= "";
Iterate through the array and put it in SJ
For (var k in data) {
str=str+ "<option value= '" +data[k]. [0]+ ' > ' +data[k]. [1]+ "</option>";
}
$ ("#qu"). html (str);
}
});
}
4. Connect the database again: load.php, Reload Dbda One method: Jsonquery
<?php
$pcode = $_post["Pcode"];
Require_once "./dbda.class.php";
$db = new Dbda ();
$sql = "SELECT * from Chinastates where parentareacode= ' {$pcode} '";
echo $db->jsonquery ($sql, 0);
Encapsulation class
<?php
Class dbda{
Public $host = "localhost";
Public $uid = "root";
Public $pwd = "";
Public $dbname = "0710_info";
/*
Query method: Executes the user-given SQL statement and returns the corresponding result
$SQL: SQL statement that the user needs to execute
$type: The type of SQL statement that the user needs to execute
Return: If the deletion statement returns TRUE or FALSE, if the query statement returns a two-dimensional array
*/
Public Function query ($sql, $type =1) {//default true for additions and deletions
$db = new Mysqli ($this->host, $this->uid, $this->pwd, $this->dbname);
if (Mysqli_connect_error ()) {
Return "Connection Failed!";
}
$result = $db->query ($sql);
if ($type ==1) {
return $result;//Change the statement to return TRUE or false
}else{
return $result->fetch_all ();//query statement returns a two-dimensional array
}
}
This method is used in Ajax to stitch the extracted data (two-dimensional arrays) into string processing
Public Function strquery ($sql, $type =1) {
$db = new Mysqli ($this->host, $this->uid, $this->pwd, $this->dbname);
if (Mysqli_connect_error ()) {
Return "Connection Failed!";
}
$result = $db->query ($sql);
if ($type ==1) {
return $result;//Change the statement to return TRUE or false
}else{
$arr = $result->fetch_all ();//query statement returns a two-dimensional array
$str = "";
foreach ($arr as $v) {
$str = $str. Implode ("^", $v). "|";
}
$str = substr ($str, 0,strlen ($STR)-1);
return $str;
}
}
This method is used in Ajax to return the JSON data type when used
Public Function Jsonquery ($sql, $type =1) {
$db = new Mysqli ($this->host, $this->uid, $this->pwd, $this->dbname);
if (Mysqli_connect_error ()) {
Return "Connection Failed!";
}
$result = $db->query ($sql);
if ($type ==1) {
return $result;//Change the statement to return TRUE or false
}else{
$arr = $result->fetch_all ();//query statement returns a two-dimensional (associative) array
Return Json_encode ($arr);//convert array to JSON
}
}
}
Implementation results:
Using Php+mysql+ajax+jquery to realize the three-level linkage function of the provincial urban area
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
