基于ajax、前后台的三级联动

深碍√TFBOYSˉ_ 2021-07-24 13:36 348阅读 0赞

在调用时才从后台取数据  
从后台取数据时根据请求参数获得对应具体数据

前台:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		select{ 
    			width:200px;
    			height:35px;
    		}
    	</style>
    	
    	<script src="jquery-3.4.1.js"></script>
    </head>
    <body>
    
    	<span>省:</span>
    	<select name="" id="" class="sheng">
    		<option value="">请选择</option>
    	</select>
    	<span>市:</span>
    	<select name="" id="" class="shi">
    	</select>
    	<span>区:</span>
    	<select name="" id="" class="qu">
    	</select>
    
    	<script>
    
    		var shengSelect=document.querySelector(".sheng");
    		var shiSelect=document.querySelector(".shi");
    		var quSelect=document.querySelector(".qu");
    
    
    		var shengIndex=0;
    		var shiIndex=0;
    
    		//页面加载完成，发送ajax请求省数据,获得省下拉框填充内容
    			(function(){ 
    				var xhr=new XMLHttpRequest();
    				xhr.onreadystatechange=function()
    				{ 
    					if(xhr.readyState==4)
    					{ 
    						if(xhr.status==200)
    						{ 
    							var shengList=JSON.parse(xhr.responseText);
    							
    							for(var i=0;i<shengList.length;i++)
    							{ 
    								var shengOption=new Option(shengList[i]);
    								shengSelect.options.add(shengOption);
    							}
    
    						}
    					}
    				};
    				//get请求传参,0省，1市，2区
    				xhr.open('get','3.php?type=0',true);
    				xhr.send(null);
    			}());
    
    		//选择省，加载市
    		shengSelect.onchange=function(event)
    		{ 	
    				shengIndex=event.target.selectedIndex-1;
    				var event=event||window.event;
    				
    				//获取市的数据
    				var xhr=new XMLHttpRequest();
    				xhr.onreadystatechange=function()
    				{ 
    					if(xhr.readyState==4)
    					{ 
    						if(xhr.status==200)
    						{ 
    							var shiList=JSON.parse(xhr.responseText);
    
    	
    							//在市的数据回来时执行,并且传参传入对应省的下标，返回对应下标数据
    							if(shengIndex==-1)
    								{ 
    									console.log("请选择省");
    									shiSelect.options.length=0;
    									quSelect.options.length=0;
    									
    								}else{ 
    									shiSelect.options.length=0;
    									for(var i=0;i<shiList.length;i++)
    									{ 
    										var shiOption=new Option(shiList[i]);
    										shiSelect.options.add(shiOption);
    									}
    
    									//获取区的数据，此时是为了选择市的时候，显示市所对应的第一个区
    									
    									var xhr2=new XMLHttpRequest()
    
    									xhr2.onreadystatechange=function()
    									{ 
    										if(xhr2.readyState==4)
    										{ 
    											if(xhr2.status==200)
    											{ 
    
    												var quList=JSON.parse(xhr2.responseText);
    												
    												quSelect.options.length=0;
    												for(var i=0;i<quList.length;i++)
    												{ 
    													var quOption=new Option(quList[i]);
    													quSelect.options.add(quOption);
    
    												}
    
    											}
    										}
    									}
    									xhr2.open('get','3.php?type=2&sheng='+shengIndex,true);
    									xhr2.send(null);
    							 	}
    
    
    						 }
    					}
    				};
    				//get请求传参,0省，1市，2市所对应第一个区,3区
    				xhr.open('get','3.php?type=1&sheng='+shengIndex,true);
    				xhr.send(null);
    				
    
    
    		
    	}
    		//选择市,加载区
    		shiSelect.onchange=function(event)
    		{ 
    			shiIndex=event.target.selectedIndex;
    			var xhr=new XMLHttpRequest();
    			xhr.onreadystatechange=function()
    			{ 
    				if(xhr.readyState==4)
    				{ 
    					if(xhr.status==200)
    					{ 
    						var quList=JSON.parse(xhr.responseText);
    						console.log(quList);
    						quSelect.options.length=0;
    						for(var i=0;i<quList.length;i++)
    						{ 
    							var quOption =new Option(quList[i]);
    							quSelect.options.add(quOption);
    						}
    
    					}
    				}
    			}
    
    			 
    
    			xhr.open('get','3.php?type=4&sheng='+shengIndex+"&"+"shi="+shiIndex,true);
    			xhr.send(null);
    		}
    
    	</script>
    	
    </body>
    
    </html>

--------------------

后台:

<?php
    
    	$type=$_GET['type'];
    
    	$shengList=['河北','黑龙江','哈尔滨'];
    	$shiList=[['保定','石家庄'],['大庆','齐齐哈尔'],['尔滨','商丘']];
    	$quList=[[['保定1','保定2'],["石1","石2"]],[["庆1","庆2","庆3"],["齐1","齐2"]],[["哈1","哈3"],["商丘1","商丘2"]]];
    
    
    	if($type==0)
    	{ 
    		echo json_encode($shengList);
    	}else if($type==1)
    	{ 
    		$shengIndex=$_GET['sheng'];
    		echo json_encode($shiList[$shengIndex]);
    	}else if($type==2){ 
    		$shengIndex=$_GET['sheng'];
    		echo json_encode($quList[$shengIndex][0]);
    	}else{ 
    		$shengIndex=$_GET['sheng'];
    		$shiIndex=$_GET['shi'];
    		echo json_encode($quList[$shengIndex][$shiIndex]);
    	}
    	
    ?>