Detaillierte Erläuterung der dreistufigen Ajax-Verknüpfungsgrafik und des Textes (mit Code)

Dieses Mal werde ich Ihnen eine detaillierte grafische Erklärung der Ajax-Drei-Ebenen-Verknüpfung (mit Code) geben. Was sind die Vorsichtsmaßnahmen für die Implementierung der Ajax-Drei-Ebenen-Verknüpfung? ein Blick.

Ajax implementiert eine dreistufige Verknüpfung, was dem Schreiben eines kleinen Plug-Ins entspricht. Sie können es einfach verwenden, wenn Sie es verwenden. Hier habe ich die Chinastates-Tabelle in der Datenbank verwendet

Die Datenbank enthält viele Inhalte. Die Namen der Regionen in der Verknüpfung der dritten Ebene sind alle darin enthalten.

Für Beispiel: Peking, der Codename von Peking ist 11 und Peking darunter. Der Untercode der Stadt ist 11, der Hauptcode von Peking ist 1101 und der Untercode der Region unter Peking ist 1101. Beim Anpassen der Region Sie können anhand des Hauptcodes nach demselben Untercode suchen und herausfinden, ob der Link-Inhalt der dritten Ebene auf der Seite angezeigt werden soll. Sie müssen lediglich ein p auf der Seite erstellen Seite

Die folgende Überlegung besteht darin, drei Spalten mit Provinzen und Städten zu haben. Diese drei Spalten verwenden die Dropdown-Liste
und verwenden dann

Der hier verwendete Datentyp: „JSON“. Wenn wir zuvor „TEXT“ JSON verwendet haben, haben wir ein Array verwendet, dann müssen wir das durchqueren Array und rufen Sie jedes Datenelement ab, um das Array in js zu durchlaufen.

 <script src="jquery-3.1.1.min.js"></script>
<script src="sanji.js"></script>Das Letzte, worüber ich sprechen möchte, ist die Verarbeitungsseite, die eine reine PHP-Seite ist. Da der zuvor verwendete Datentyp JSON war, sollte die Ausgabe der Verarbeitungsseite auch ein Array sein. Die Verarbeitungsseite kann nicht </p>
<pre class="brush:php;toolbar:false">$(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);
      }
    })
  }
})

Die Zeichenfolgen

werden gespleißt. Hier habe ich eine JsonQuery-Methode

auf der Paketseite geschrieben, die beim Schreiben der Verarbeitung sehr praktisch ist Seite

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;
    }
}

Auf diese Weise kann die dreistufige Verknüpfung vervollständigt werden, wie in der Abbildung unten gezeigt

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

Ich glaube, Sie haben das gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte die anderen verwandten Themen im Artikel über die chinesische PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung des Ajax-Paging-Abfragebilds und -Textes

Wie man Dateieingaben verwendet, um asynchrones Ajax zu implementieren hochladen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der dreistufigen Ajax-Verknüpfungsgrafik und des Textes (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!