文章詳情頁
AJAX實現(xiàn)省市縣三級聯(lián)動效果
瀏覽：73日期：2022-06-12 11:12:25
最近在學(xué)AJAX做到這個省市縣三級聯(lián)動的案例，這里只是講一下ajax請求的一些知識，對服務(wù)端數(shù)據(jù).php文件就不敘述了。
（tips:其實省市縣三級聯(lián)動只需要引入jQuery省市縣三級聯(lián)動插件就可以實現(xiàn)）
效果圖
首先準(zhǔn)備兩個服務(wù)端文件，另一個文件太長，這里就不導(dǎo)入了
selsect.php
<?php /* 省市縣后臺數(shù)據(jù)接口 接口調(diào)用規(guī)則： 1.參數(shù)一：flag，用來區(qū)分請求的是省市縣中間的那種數(shù)據(jù) 2.參數(shù)二:選擇省的時候傳遞pid，選擇市的時候傳遞cId http://localhost/select.php?flag=1#pId=23 */ // include("./selectdata.php"); require("./selectdata.php"); // 省市縣數(shù)據(jù)來自selectdata.php文件 $province = $provinceJson; $city = $cityJson; $county = $countyJson; $flag = $_GET["flag"]; // 省級數(shù)據(jù) if($flag == 1){echo json_encode($province); // 市級數(shù)據(jù) }else if($flag == 2){$pId = $_GET["pId"];$cityData = array();foreach ($city as $value) { if($value->id == $pId){// 直轄市array_push($cityData,$value);break; }else if($value->parent == $pId){// 非直轄市array_push($cityData,$value); }}echo json_encode($cityData); // 縣級數(shù)據(jù) }else if($flag == 3){$cId = $_GET["cId"];$countyData = array();foreach ($county as $value) { if($value->parent == $cId){array_push($countyData,$value); }}echo json_encode($countyData); }?>select.html
這里可以用 底層ajax 請求，也可以用快捷方法 $.get 方法進行數(shù)據(jù)請求。因為請求的服務(wù)端文件跟當(dāng)前文件 同源 ，所以不需要進行 跨域 請求。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function($){ function queryData(obj,callback){ // $.ajax({ // type:"get", // url:"http://localhost/AJAX/select.php", // data:obj, // dataType:"json", // success:function(data){ // callback(data); // } // }); $.get("http://localhost/AJAX/select.php",obj,function(data){ callback(data); },"json"); }; queryData({ flag:1 },function(data){ var option = ""; $.each(data,function(i,e){ option += "<option value="" + e.id + "">" + e.province +"</option>" }); $("#province").append(option); }); $("#province").change(function(){ // 避免數(shù)據(jù)疊加 $("#city").find("option:gt(0)").remove(); queryData({ flag:2, pId:$(this).val() },function(data){ var option = ""; $.each(data,function(i,e){ option += "<option value="" + e.id + "">" + e.city +"</option>" }); $("#city").append(option); }); }); $("#city").change(function(){ $("#county").find("option:gt(0)").remove(); queryData({ flag:3, cId:$(this).val() },function(data){ var option = ""; $.each(data,function(i,e){ option += "<option value="" + e.id + "">" + e.county +"</option>" }); $("#county").append(option); }); }); }); </script> <style type="text/css"> #container{ width: 500px; min-height: 300px; margin: auto; text-align: center; padding: 10px; } </style> </head> <body> <div id="container"> <label> 省: <select id="province"> <option >請選擇省...</option> </select> </label> <label> 市: <select id="city"> <option >請選擇市...</option> </select> </label> <label> 縣: <select id="county"> <option >請選擇縣...</option> </select> </label> </div> </body></html>這里還需要說明的是：使用$.ajax方法請求時，如果第二次ajax請求依賴于第一次請求的結(jié)果，那么第二次請求必須放到回調(diào)函數(shù)內(nèi)部，這是因為ajax 異步 請求。
類似于這樣
$.ajax({ type:"get", url:"citycode.php", data:{cityName:city}, dataType:"json", // 如果第二次ajax請求依賴于第一次請求的結(jié)果，那么第二次請求必須放到回調(diào)函數(shù)內(nèi)部 success:function(data){ $.ajax({ type:"get", url:"cityweather.php", data:{cityCode:data.cityCode}, dataType:"json", success:function(res){ data = res.retData; var tag = "<ul><li>風(fēng)向:"+data.WD+"</li><li>風(fēng)級:"+data.WS+"</li><li>海拔:"+data.altitude+"</li><li>日期:"+data.date+"</li><li>最高溫度:"+data.h_tmp+"</li><li>最低溫度:"+data.l_tmp+"</li><li>平均溫度:"+data.temp+"</li><li>日出時間:"+data.sunrise+"</li><li>日落時間:"+data.sunset+"</li><li>緯度:"+data.latitude+"</li><li>經(jīng)度:"+data.longitude+"</li></ul>" $("#info").html(tag); } }) }})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
標(biāo)簽：
Ajax
排行榜
網(wǎng)公網(wǎng)安備