PHP + MySql + Ajax + jQuery is used to implement the provincial/municipal level-3 linkage function,

Source: Internet
Author: User

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:

 

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.