AJax 三级联动
?1、主頁(yè)面
<title>無(wú)標(biāo)題文檔</title> <script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head><body> <!--為了方便以后使用,我們?cè)谥黜?yè)面僅僅寫(xiě)一個(gè)div,新建一個(gè)頁(yè)面寫(xiě)script代碼,將其設(shè)置成為一個(gè)插件,方便以后的調(diào)用--> <div id="sanji"></div> </body> </html>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é)
- 上一篇: 架构之美读后感
- 下一篇: 让设计模式在开始就拯救你的项目