Maison >interface Web >js tutoriel >Ajax réalise le concept le plus élémentaire de liaison à trois niveaux

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

php中世界最好的语言original: 2018-04-02 14:55:511427parcourir

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>

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菜单添加点击事件
});//页面加载完成之后过来执行某些代码

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

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

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de GET et POST en AjaxArticle suivant：Explication détaillée de l'utilisation de GET et POST en Ajax

Articles Liés

Voir plus