Implementation of ajax three-level linkage,

Implementation of ajax three-level linkage,

Ajax achieves three-level interaction, which is equivalent to writing a small plug-in. You can use it directly when using it. Here I use the chinastates table in the database,

There is a lot of database content, and the region names in the three-level linkage are in it, using the code-and-Sub-code method

For example, in Beijing, the Beijing code is 11, and the Beijing Sub-code below is 11. The main code of Beijing is 1101, and the regional sub-code below Beijing is 1101, when you call a region, You can query the same sub-code as the primary code.

To display the content of a three-level interaction on the page, you only need to create a div on the page.

<Div id = "sanji"> </div>
 

The following are three columns: province, city, and district. The three columns use a drop-down list. <option> </option> is used for writing in JavaScript and jquery, the first thing to consider is to introduce the jquery package and js file, and then write three drop-down lists.

 <script src="jquery-3.1.1.min.js"></script><script src="sanji.js"></script>

$ (Document ). ready (function (e) {var str = "<select id = 'shanghai'> </select> <select id = 'shi'> </select> <select id = 'qu'> </select> "; // write three drop-down lists and put them in the div $ ("# sanji" character .html (str); fullsheng (); fullshi (); fullqu (); $ ("# sheng "). change (function () {fullshi (); fullqu () ;}) $ ("# shi "). change (function () {fullqu () ;}) // load the province information function fullsheng () {var pcode = "0001"; // query data based on the parent code $. ajax ({async: false, // url in asynchronous mode: "sanjichuli. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {// The data passed here is an array str = ""; for (var j in data) // The traversal array in js uses for to represent {str + = "<option value = '" + data [j]. areaCode + "'>" + data [j]. areaName + "</option>" ;}$ ("# sheng" character .html (str) ;}}) // load the city information function fullshi () {var pcode = $ ("# sheng "). val (); $. ajax ({async: false, url: "sanjichuli. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {// The data passed here is an array str = ""; for (var j in data) // The traversal array in js uses for to represent {str + = "<option value = '" + data [j]. areaCode + "'>" + data [j]. areaName + "</option>" ;}$ ("# shi" character .html (str) ;}} // information of the loading area function fullqu () {var pcode = $ ("# shi "). val (); $. ajax ({url: "sanjichuli. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {// The data passed here is an array str = ""; for (var j in data) // The traversal array in js uses for to represent {str + = "<option value = '" + data [j]. areaCode + "'>" + data [j]. areaName + "</option>" ;}$ ("# qu" ).html (str );}})}})

Here, dataType is used: "JSON". If "TEXT" JSON is used before, we use an array. Then we need to traverse the array and retrieve each piece of data, in js, retrieving arrays uses for () {} to traverse arrays.

The last thing I want to talk about is processing the page. It is a pure PHP page. Because dataType used JSON before, the page output processing should also be an array. In this case, the processing page cannot be concatenated with strings. Here, I wrote a JsonQuery method on the database encapsulation page.

function JsonQuery($sql,$type=1){   $db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);    $result=$db->query($sql);    if($type=="1")    {     $arr=$result->fetch_all(MYSQLI_ASSOC);      return json_encode($arr);    }    else    {      return $result;    }} 

Then it is easy to use when writing the processing page.

<?php$pcode=$_POST["pcode"];include("DADB.class.php");$db=new DADB();$sql="select * from chinastates WHERE parentareacode='{$pcode}'";echo $db->JsonQuery($sql);

This completes the three-level linkage, as shown in

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.