當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJax 三级联动

發布時間：2025/3/20 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 AJax 三级联动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?1、主頁面

<title>無標題文檔</title> <script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head><body>  <div id="sanji"></div> </body> </html>

2、script代碼

// JavaScript Document $(document).ready(function(e) {//寫三個select下拉列表var zhuti = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";$("#sanji").html(zhuti);//填充省FillSheng();//填充市FillShi();//填充區FillQu();//當省選中變化的時候去填充市和區$("#sheng").change(function(){//填充市FillShi();//填充區FillQu();})//當市選中變化的時候去填充區$("#shi").change(function(){//填充區FillQu();})}); //填充省的方法 function FillSheng() {//省的父級代號var pcode = "0001";//調用AJAX$.ajax({async:false, //關閉異步，開啟同步url:"chuli.php",data:{pcode:pcode},type:"POST",dataType:"TEXT",success: function(data){//拆分返回的字符串，得到行的數組var hang = data.trim().split("|");var str = "";for(var i=0; i<hang.length;i++){//返回列的數組var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sheng").html(str);}}); }//填充市的方法 function FillShi() {//取到市的父級代號var pcode = $("#sheng").val();//調用AJAX$.ajax({async:false,url:"chuli.php",data:{pcode:pcode},type:"POST",dataType:"TEXT",success: function(data){var hang = data.trim().split("|");var str = "";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#shi").html(str);}}); } //填充區的方法 function FillQu() {//找到區的父級代號var pcode = $("#shi").val();//調用AJAX$.ajax({url:"chuli.php",data:{pcode:pcode},type:"POST",dataType:"TEXT",success: function(data){var hang = data.trim().split("|");var str = "";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#qu").html(str);}}); }

3、處理頁面

我們從數據庫中查詢行政區，是根據父級代號查詢子級區域，因此，在整個過程中，我們只需要寫一個php處理頁面，之后反復調用即可

<?php include("../DBDA.php"); $db = new DBDA();//接收父級代號 $pcode = $_POST["pcode"];//根據父級代號查子級區域 $sql = "select * from ChinaStates where ParentAreaCode='{$pcode}'";echo $db->StrQuery($sql);

?>

注：AJAX：異步AJAX

異步：
1.數據傳輸：收發數據的時候不用等到對方接收，可以繼續發送
2.AJAX：在調用處理頁面處理數據的時候，下面的代碼可以繼續執行，效率高

同步：
1.數據傳輸：收發數據的時候要等到對方接收成功，才可以繼續發送下一個
2.AJAX：在調用處理頁面處理數據的時候，下面的代碼不能執行，只有當AJAX完全執行完之后，才能繼續執行下面代碼

轉載于:https://www.cnblogs.com/sdzbxfcy/p/5616712.html

總結

以上是生活随笔為你收集整理的AJax 三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax