Implementierungsmethode der dreistufigen Ajax-Verknüpfung

Dieser Artikel stellt hauptsächlich die Implementierungsmethode der dreistufigen Verknüpfung von Ajax vor. Er hat einen gewissen Wert als Referenz für das Erlernen von Ajax >ajax Interessierte Freunde können sich auf

ajax beziehen, um eine dreistufige Verknüpfung zu erreichen, was dem Schreiben eines kleinen Plug-Ins entspricht. Sie können es einfach verwenden, wenn Sie es verwenden Tabelle in der Datenbank,

Die Datenbank enthält viel Inhalt, und die Namen der Regionen in der dreistufigen Verknüpfung sind alle darin enthalten, wobei der Code und die Unter- Codemethode

Beispiel: Peking, Peking Der Codename ist 11 und der Untercodename der Stadt Peking darunter ist 11. Der Hauptcodename der Stadt Peking ist 1101 und der Untercodename Die Region unterhalb der Stadt Peking ist 1101. Wenn Sie die Region anpassen, können Sie die mit dem Hauptcodenamen identischen Untercodenamen abfragen und bei Bedarf abfragen

Um den Link-Inhalt der dritten Ebene auf der Seite anzuzeigen, müssen Sie lediglich ein p auf der Seite erstellen

4343e733243c11f6a54985e204099f75< ;/p>

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

Dropdown-Liste, weil es Da es in js und jquery geschrieben ist, müssen Sie zunächst das jquery-Paket und die js-Datei einführen und dann drei Dropdown-Listen schreiben

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

      }

    })
  }



})

Der hier verwendete Datentyp: „JSON“ war zuvor „TEXT“. „Für JSON verwenden wir eine Array, also müssen wir das Array durchlaufen und jedes Datenelement abrufen. Um das Array in js zu durchlaufen, verwenden wir for(){}, um das Array zu durchlaufen.

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

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

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

geschrieben Paketseite, die die Datenbank aufruft, und dann in Es ist sehr praktisch, es beim Schreiben von Verarbeitungsseiten zu verwenden

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

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein , und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Verwandte Empfehlungen:

Beispiel für die gemeinsame Nutzung von jQuery und Ajax fordern lokale Daten an, um die Produktlistenseite zu laden und zur Detailseite zu springen

jquery ajax Methoden zur Realisierung des sekundären Verknüpfungseffekts

Detaillierte Erläuterung mehrerer häufig verwendeter Funktionen von Ajax in jQuery

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der dreistufigen Ajax-Verknüpfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!