Ajax réalise une liaison à trois niveaux (avec code)-js tutoriel-php.cn

Ajax réalise une liaison à trois niveaux (avec code)

php中世界最好的语言

Libérer： 2018-04-25 16:20:07

original

1567 Les gens l'ont consulté

Cette fois, je vais vous présenter ajax pour réaliser une liaison à trois niveaux (avec code). Quelles sont les précautions pour qu'ajax réalise une liaison à trois niveaux. Ce qui suit est un cas pratique, prenons un. regarder.

1. Placez d'abord un p sur une page pour faciliter les futures méthodes de référence

<body>
<p id="sanji">//p的id为“sanji”
</p>

Copier après la connexion

2. Page de traitement sanji js

$(document).ready(function(){
   //向p里面放三个下拉菜单
  var str = "<select id=&#39;sheng&#39;></select>
    <select id=&#39;shi&#39;></select>
    <select id=&#39;qu&#39;></select>";
  //给三个下拉列表定义 str 变量
  
  $("#sanji").html(str);
  FillSheng();
  FillShi();
  FillQu();//Sheng Shi Qu的逻辑顺序 
  
   $("#sheng").change(function(){
     FillShi();
     FillQu();
   })//给sheng菜单添加点击事件
   $("#shi").change(function(){
   FillQu();
  })//给shi菜单添加点击事件
});//页面加载完成之后过来执行某些代码

Copier après la connexion

Méthode de remplissage

function FillSheng()
{
 
  var pcode = "";//定义一个变量
  $.ajax({
     
     url:"chuli.php",
     data:{pcode:pcode},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
              var hang = data.split("^");
              str +="<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
      }
     $("#sheng").html(str);
     });
}

Copier après la connexion

2. Remplir la méthode shi

function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
   async:false,
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
     }
     $("#shi").html(str);
    }
  });
}

Copier après la connexion

3. Remplir la méthode qu

function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
     }
     $("#qu").html(str);
    }
  });
}

Copier après la connexion

4. Page Chuli

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

Copier après la connexion

Croyez après avoir lu. Dans le cas de cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser ajax pour créer une fonction de saut de page partiel

Méthode ajax.load() dans jQuery Comment utiliser

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!