Ajax réalise le concept le plus élémentaire de liaison à trois niveaux-js tutoriel-php.cn

Ajax réalise le concept le plus élémentaire de liaison à trois niveaux

php中世界最好的语言

Libérer： 2018-04-02 14:55:51

original

1337 Les gens l'ont consulté

Cette fois, je vais vous présenter le concept le plus basique d'ajax pour réaliser une liaison à trois niveaux. Quelles sont les précautions pour qu'ajax réalise une liaison à trois niveaux. Ce qui suit est un cas pratique, prenons. un regard.

L'exemple de cet article partage le code spécifique d'ajax pour obtenir une liaison à trois niveaux pour votre référence. Le contenu spécifique est le suivant

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

<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

3. 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

3. Méthode Fill qu

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

Page 4.chuli

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

<?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

Lecture recommandée :

JS implémente l'actualisation partielle AJAX (avec code)

Deux méthodes pour l'actualisation de page optimisée Ajax

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!