Detailed explanation of ajax three-level linkage graphic and text (with code)

This time I will bring you a detailed graphic explanation of ajax three-level linkage (with code). What are the precautions for ajax to achieve three-level linkage? . Here is a practical case, let’s take a look.

ajax implements three-level linkage, which is equivalent to writing a small plug-in. You can just use it directly when using it. Here I used the chinastates table in the database,

The database contains a lot of content. The names of regions in the third-level linkage are all in it. They use the code name and sub-code method.

For example, Beijing, the code name of Beijing is 11, and Beijing below it The city sub-code is 11, the main code of Beijing is 1101, and the sub-code of the region below Beijing is 1101. When adjusting the region, you can query the sub-code that is the same as it based on the main code, and you can find out

If you want the third-level linkage content to be displayed on the page, you only need to create a p on the page

The following consideration is to have three columns of provinces and cities. These three columns use drop-down list, then use because It is written with js and jquery, so 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=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>";  //先写三个下拉列表放到p里面
$("#sanji").html(str);
  fullsheng();
  fullshi();
  fullqu();
  $("#sheng").change(function(){
    fullshi();
    fullqu();
  })
  $("#shi").change(function(){
    fullqu();
  })
  //加载省份信息
  function fullsheng()
  {
    var pcode="0001";//根据父级代号查数据
    $.ajax({
      async:false, //采用异步的方式
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#sheng").html(str);
      }
    })
  }
//加载市的信息
  function fullshi()
  {
    var pcode=$("#sheng").val();
    $.ajax({
      async:false,
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#shi").html(str);
      }
    })
  }
 // 加载区的信息
  function fullqu()
  {
    var pcode=$("#shi").val();
    $.ajax({
      url:"sanjichuli.php",
      data:{pcode:pcode},
      type:"POST",
      dataType:"JSON",
      success:function(data){
        //这里传过来的data是个数组
        str="";
        for(var j in data)//js中的遍历数组用for来表示
        {
          str +="<option value=&#39;"+data[j].AreaCode+"&#39;>"+data[j].AreaName+"</option>";
        }
        $("#qu").html(str);
      }
    })
  }
})

The dataType: "JSON" used here is used before. TEXT" JSON If we use an array, then we need to traverse the array and get each piece of data. To traverse the array in js, we use for(){} to traverse the array.

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

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 very convenient to use when writing the processing page

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

This is the third level The linkage can be completed, as shown in the figure below

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of ajax paging query image and text

How to use fileinput to implement ajax asynchronous upload

The above is the detailed content of Detailed explanation of ajax three-level linkage graphic and text (with code). For more information, please follow other related articles on the PHP Chinese website!