PHP + MySql + Ajax + jQuery is used to implement the provincial/municipal level-3 linkage function,
Use PHP + MySql + Ajax + jQuery to implement provincial/municipal level-3 linkage Function
Requirement: Write a three-level linkage between province, city (or year, month, and day) to select a region or time drop-down.
Implementation Technology: php ajax
Implementation: When the provincial drop-down changes, the Municipal drop-down changes, and the time zone drop-down changes.
Query using the chinastates table
Load data using Ajax
1. This is the chinastates table.
2. Make a simple php: Ajax_eg.php
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Script src = "bootstrap/js/jquery-1.11.2.min.js"> </script>
</Head>
<Style>
. Sanji {
Margin-left: 550px;
Margin-top: 150px;
}
</Style>
<Body>
<Div class = "sanji"> </div>
</Body>
</Html>
3. Create jquery: Ajax_ssq.js based on the previous page.
// JavaScript Document
// Executed only after the page content is loaded
$ (Document). ready (function (e ){
// Load the three drop-down lists
$ ("# Sanji" ).html ("<select id = 'shanghai'> </select> <select id = 'shi'> </select> <select id = 'qu'> </select> ");
// Load the display data
// 1. Load the province
LoadSheng ();
// 2. Load the city
LoadShi ();
// 3. loading area
LoadQu ();
// When the selected province changes, reload the city and district
$ ("# Sheng "). change (function () {// when the element value changes, a change event occurs. This event is only applicable to text fields and textarea and select elements.
// Load the city
LoadShi ();
// Loading area
LoadQu ();
})
// Reload the zone when the selected city changes
$ ("# Shi"). change (function (){
// Loading area
LoadQu ();
})
});
// Load province Information
Function LoadSheng ()
{
// Obtain the parent code
Var pcode = "0001 ";
// Query data based on the parent code
$. Ajax ({
// Cancel Asynchronization, that is, you must complete the above before proceeding to the following
Async: false,
Url: "load. php ",
Data: {pcode: pcode },
Type: "POST ",
DataType: "JSON ",
Success: function (data ){
Var str = "";
// Traverse the array and put it into sj
For (var k in data ){
Str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [1] + "</option> ";
}
$ ("# Sheng" 2.16.html (str );
}
});
}
// Load the city information
Function LoadShi ()
{
// Obtain the parent code
Var pcode = $ ("# sheng"). val ();
// Query data based on the parent code
$. Ajax ({
// Cancel Asynchronization, that is, you must complete the above before proceeding to the following
Async: false,
Url: "load. php ",
Data: {pcode: pcode },
Type: "POST ",
DataType: "JSON ",
Success: function (data ){
Var str = "";
// Traverse the array and put it into sj
For (var k in data ){
Str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [0] + "</option> ";
}
$ ("# Shi" pai.html (str );
}
});
}
// Loading zone information
Function LoadQu ()
{
// Obtain the parent code
Var pcode = $ ("# shi"). val ();
// Query data based on the parent code
$. Ajax ({
// Asynchronous cancellation is not required
Url: "load. php ",
Data: {pcode: pcode },
Type: "POST ",
DataType: "JSON ",
Success: function (data ){
Var str = "";
// Traverse the array and put it into sj
For (var k in data ){
Str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [1] + "</option> ";
}
$ ("# Qu" pai.html (str );
}
});
}
4. Connect the database again: load. php, and reload the DBDA 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: Execute the SQL statement given by the user and return the corresponding result.
$ SQL: SQL statement to be executed
$ Type: type of the SQL statement to be executed
Return: returns true or false if it is an added or deleted statement, and returns a two-dimensional array if it is a query statement.
*/
Public function query ($ SQL, $ type = 1) {// by default, "true" indicates addition, deletion, and modification.
$ 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; // The add, delete, and modify statements return true or false.
} Else {
Return $ result-> fetch_all (); // the query statement returns a two-dimensional array.
}
}
// This method is used in ajax to splice the Retrieved Data (two-dimensional array) into strings.
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; // The add, delete, and modify statements return true or false.
} Else {
$ Arr = $ result-> fetch_all (); // the 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.
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; // The add, delete, and modify statements return true or false.
} Else {
$ Arr = $ result-> fetch_all (); // the query statement returns a two-dimensional (correlated) array.
Return json_encode ($ arr); // convert the array to json
}
}
}
Effect:
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
