Implementation method of ajax three-level linkage

This article mainly introduces the implementation method of ajax three-level linkage in detail. It has a certain value as a reference for learning ajax, and has a deep understanding of ajax Interested friends can refer to

ajax to achieve three-level linkage, which is equivalent to writing a small plug-in. When you use it, you can just use it. Here I used the chinastates table in the database,

The database contains a lot of content, and the region names in the third-level linkage are all in it, using the method of code name and sub-code name

For example, Beijing, Beijing The code name is 11, and the sub-code name of Beijing City below it is 11. The main code name of Beijing City is 1101, and the sub-code name of the region below Beijing City is 1101. When adjusting the region, you can query the sub-code names that are the same as it according to the main code name, and you can Query it 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

< ;/p>

The following consideration is to have three columns of provinces and municipalities. These three columns use drop-down list, so use < option> Because it is written in js 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=&#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);

      }

    })
  }



})

What is used here is dataType: "JSON". Before, we used "TEXT" JSON. If an array is used, 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 was JSON before, the output of the processing page should also be an array. In this case, the processing page cannot

The string is spliced. Here I write 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;
    }
}

and then write the processing It is very convenient to use when entering the 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);

In this way, the three-level linkage can be completed, as shown in the figure below

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Example sharing jQuery and Ajax request local data to load the product list page and jump to the details page

jquery's ajax Methods to realize the secondary linkage effect

Detailed explanation of several commonly used functions of Ajax in jQuery

The above is the detailed content of Implementation method of ajax three-level linkage. For more information, please follow other related articles on the PHP Chinese website!