suchen

Heim >Web-Frontend >js-Tutorial >Ajax realisiert das grundlegendste Konzept der dreistufigen Verknüpfung

Ajax realisiert das grundlegendste Konzept der dreistufigen Verknüpfung

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

Dieses Mal werde ich Ihnen das grundlegendste Konzept von Ajax vorstellen, um eine Drei-Ebenen-Verknüpfung zu realisieren. Was sind die Vorsichtsmaßnahmen für Ajax, um eine Drei-Ebenen-Verknüpfung zu realisieren? ein Blick.

Das Beispiel in diesem Artikel teilt den spezifischen Code von Ajax, um eine dreistufige Verknüpfung zu Ihrer Referenz zu erreichen. Der spezifische Inhalt lautet wie folgt: 1. Platzieren Sie zur Erleichterung zunächst ein p auf einer Seite zukünftige Referenzmethoden

2. Sanji js-Verarbeitungsseite

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

3. Füllmethode

$(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. Füllen Sie die Qu-Methode aus 

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

4.chuli-Seite 

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website! 

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);
    }
  });
}
Empfohlene Lektüre: 

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

Zwei Methoden für Ajax-optimierte Seitenaktualisierung

Das obige ist der detaillierte Inhalt vonAjax realisiert das grundlegendste Konzept der dreistufigen Verknüpfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung von GET und POST in AjaxNächster Artikel：Detaillierte Erläuterung der Verwendung von GET und POST in Ajax

In Verbindung stehende Artikel

Mehr sehen