當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

AJax 三级联动

發(fā)布時(shí)間：2025/3/20 编程问答 18 豆豆

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

?1、主頁(yè)面

2、script代碼

// JavaScript Document $(document).ready(function(e) {//寫(xiě)三個(gè)select下拉列表var zhuti = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";$("#sanji").html(zhuti);//填充省FillSheng();//填充市FillShi();//填充區(qū)FillQu();//當(dāng)省選中變化的時(shí)候去填充市和區(qū)$("#sheng").change(function(){//填充市FillShi();//填充區(qū)FillQu();})//當(dāng)市選中變化的時(shí)候去填充區(qū)$("#shi").change(function(){//填充區(qū)FillQu();})}); //填充省的方法 function FillSheng() {//省的父級(jí)代號(hào)var pcode = "0001";//調(diào)用AJAX$.ajax({async:false, //關(guān)閉異步，開(kāi)啟同步url:"chuli.php",data:{pcode:pcode},type:"POST",dataType:"TEXT",success: function(data){//拆分返回的字符串，得到行的數(shù)組var hang = data.trim().split("|");var str = "";for(var i=0; i<hang.length;i++){//返回列的數(shù)組var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sheng").html(str);}}); }//填充市的方法 function FillShi() {//取到市的父級(jí)代號(hào)var pcode = $("#sheng").val();//調(diào)用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);}}); } //填充區(qū)的方法 function FillQu() {//找到區(qū)的父級(jí)代號(hào)var pcode = $("#shi").val();//調(diào)用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、處理頁(yè)面

我們從數(shù)據(jù)庫(kù)中查詢行政區(qū)，是根據(jù)父級(jí)代號(hào)查詢子級(jí)區(qū)域，因此，在整個(gè)過(guò)程中，我們只需要寫(xiě)一個(gè)php處理頁(yè)面，之后反復(fù)調(diào)用即可

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

?>

注：AJAX：異步AJAX

異步：
1.數(shù)據(jù)傳輸：收發(fā)數(shù)據(jù)的時(shí)候不用等到對(duì)方接收，可以繼續(xù)發(fā)送
2.AJAX：在調(diào)用處理頁(yè)面處理數(shù)據(jù)的時(shí)候，下面的代碼可以繼續(xù)執(zhí)行，效率高

同步：
1.數(shù)據(jù)傳輸：收發(fā)數(shù)據(jù)的時(shí)候要等到對(duì)方接收成功，才可以繼續(xù)發(fā)送下一個(gè)
2.AJAX：在調(diào)用處理頁(yè)面處理數(shù)據(jù)的時(shí)候，下面的代碼不能執(zhí)行，只有當(dāng)AJAX完全執(zhí)行完之后，才能繼續(xù)執(zhí)行下面代碼

轉(zhuǎn)載于:https://www.cnblogs.com/sdzbxfcy/p/5616712.html

總結(jié)

以上是生活随笔為你收集整理的AJax 三级联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Ajax