Méthode de mise en œuvre de la liaison ajax à trois niveaux-js tutoriel-php.cn

Méthode de mise en œuvre de la liaison ajax à trois niveaux

韦小宝

Libérer： 2018-01-01 18:16:01

original

1212 Les gens l'ont consulté

Cet article présente principalement en détail la méthode de mise en œuvre de ajax liaison à trois niveaux. Il a une certaine valeur comme référence pour l'apprentissage de ajax. >ajax Les amis intéressés peuvent se référer à

ajax pour obtenir une liaison à trois niveaux, ce qui équivaut à écrire un petit plug-in. Vous pouvez simplement l'utiliser lorsque vous l'utilisez. Ici, j'ai utilisé les chinastates. table dans la base de données,

La base de données contient beaucoup de contenu, et les noms des régions dans la liaison à trois niveaux y sont tous, en utilisant le code et les sous- méthode de code

Par exemple, Pékin, Pékin Le nom de code est 11 et le nom de sous-code de la ville de Pékin en dessous est 11. Le nom de code principal de la ville de Pékin est 1101 et le nom de sous-code de la région située en dessous de la ville de Pékin est 1101. Lors de l'ajustement de la région, vous pouvez interroger les noms de sous-codes qui sont les mêmes en fonction du nom de code principal, et vous pouvez l'interroger

Si vous le souhaitez le contenu de lien de troisième niveau à afficher sur la page, il vous suffit de créer un p sur la page

< ;/p>

La considération suivante est d'avoir trois colonnes de provinces et de villes. Ces trois colonnes utilisent la

liste déroulante, donc l'option < est écrit en js et jquery, la première chose à considérer est d'introduire le package jquery et le fichier js, puis d'écrire trois listes déroulantes

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

Copier après la connexion

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

      }

    })
  }



})

Copier après la connexion

Le dataType : "JSON" utilisé ici était "TEXT" auparavant "Pour JSON, nous utilisons un. tableau, nous devons donc parcourir le tableau et obtenir chaque élément de données. Pour parcourir le tableau en js, nous utilisons for(){} pour parcourir le tableau.

La dernière chose dont je veux parler est la page de traitement, qui est une page PHP pure. Parce que le type de données utilisé auparavant était JSON, la sortie de la page de traitement devrait également être un tableau. la page de traitement ne peut pas

Les chaînes sont épissées Ici, j'ai écrit une méthode JsonQuery

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

Copier après la connexion

sur le. page de package qui appelle la base de données, puis dans Il est très pratique à utiliser lors de l'écriture des pages de traitement

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

Copier après la connexion

De cette façon , le lien à trois niveaux peut être complété, comme le montre la figure ci-dessous

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. , et j'espère aussi que tout le monde soutiendra le site Web PHP chinois.

Recommandations associées :

Exemple de partage de jQuery et Ajax demandent des données locales pour charger la page de liste de produits et accéder à la page de détails

Méthodes ajax de jquery pour réaliser l'effet de liaison secondaire

Explication détaillée de plusieurs fonctions couramment utilisées d'Ajax dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!