AJAX實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果
最近在學(xué)AJAX做到這個(gè)省市縣三級(jí)聯(lián)動(dòng)的案例,這里只是講一下ajax請(qǐng)求的一些知識(shí),對(duì)服務(wù)端數(shù)據(jù).php文件就不敘述了。
(tips:其實(shí)省市縣三級(jí)聯(lián)動(dòng)只需要引入jQuery省市縣三級(jí)聯(lián)動(dòng)插件就可以實(shí)現(xiàn))
效果圖
首先準(zhǔn)備兩個(gè)服務(wù)端文件,另一個(gè)文件太長(zhǎng),這里就不導(dǎo)入了
selsect.php
<?php /* 省市縣后臺(tái)數(shù)據(jù)接口 接口調(diào)用規(guī)則: 1.參數(shù)一:flag,用來(lái)區(qū)分請(qǐng)求的是省市縣中間的那種數(shù)據(jù) 2.參數(shù)二:選擇省的時(shí)候傳遞pid,選擇市的時(shí)候傳遞cId http://localhost/select.php?flag=1#pId=23 */ // include('./selectdata.php'); require('./selectdata.php'); // 省市縣數(shù)據(jù)來(lái)自selectdata.php文件 $province = $provinceJson; $city = $cityJson; $county = $countyJson; $flag = $_GET['flag']; // 省級(jí)數(shù)據(jù) if($flag == 1){ echo json_encode($province); // 市級(jí)數(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); // 縣級(jí)數(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 請(qǐng)求,也可以用快捷方法 $.get 方法進(jìn)行數(shù)據(jù)請(qǐng)求。因?yàn)檎?qǐng)求的服務(wù)端文件跟當(dāng)前文件 同源 ,所以不需要進(jìn)行 跨域 請(qǐ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 >請(qǐng)選擇省...</option> </select> </label> <label> 市: <select id="city"> <option >請(qǐng)選擇市...</option> </select> </label> <label> 縣: <select id="county"> <option >請(qǐng)選擇縣...</option> </select> </label> </div> </body> </html>
這里還需要說(shuō)明的是:使用$.ajax方法請(qǐng)求時(shí),如果第二次ajax請(qǐng)求依賴于第一次請(qǐng)求的結(jié)果,那么第二次請(qǐng)求必須放到回調(diào)函數(shù)內(nèi)部,這是因?yàn)閍jax 異步 請(qǐng)求。
類似于這樣
$.ajax({ type:'get', url:'citycode.php', data:{cityName:city}, dataType:'json', // 如果第二次ajax請(qǐng)求依賴于第一次請(qǐng)求的結(jié)果,那么第二次請(qǐng)求必須放到回調(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)級(jí):'+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>日出時(shí)間:'+data.sunrise+'</li><li>日落時(shí)間:'+data.sunset+'</li><li>緯度:'+data.latitude+'</li><li>經(jīng)度:'+data.longitude+'</li></ul>' $('#info').html(tag); } }) } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
- ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
- ajax三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法
- ajax實(shí)現(xiàn)無(wú)刷新省市縣三級(jí)聯(lián)動(dòng)
- ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
- Ajax商品分類三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)(案例)
- Ajax+php實(shí)現(xiàn)商品分類三級(jí)聯(lián)動(dòng)
- ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果
- 簡(jiǎn)單實(shí)現(xiàn)ajax三級(jí)聯(lián)動(dòng)效果
相關(guān)文章
AJAX 二級(jí)級(jí)聯(lián)菜單實(shí)現(xiàn)代碼
AJAX實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單,用PHP完成2009-11-11使用ajax技術(shù)無(wú)刷新動(dòng)態(tài)調(diào)用股票信息
新浪的財(cái)金頻道一直感覺(jué)做得很好。但由于最近網(wǎng)速慢的緣故,查看股票信息時(shí)網(wǎng)頁(yè)老是打不開(kāi)。這幾天一直在研究ajax,于是用jquery自己做了一個(gè)自動(dòng)讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁(yè)面。2008-11-11ajax判斷后端返回的數(shù)據(jù)是否為null的方法
今天小編就為大家分享一篇ajax判斷后端返回的數(shù)據(jù)是否為null的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08菜鳥(niǎo)蔡之Ajax復(fù)習(xí)第二篇(JQuery中的load()方法實(shí)現(xiàn)Ajax功能)
在上一篇博客中寫到的是在傳統(tǒng)的Javascript中使用XMLHttpRequest對(duì)象異步加載數(shù)據(jù)的,唉,童鞋.......看到那些代碼是不是有點(diǎn)頭疼啊!呵呵......2012-11-11MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2015-10-10django中使用jquery ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤的解決辦法(兩種方法)
在django中,使用jquery ajax post數(shù)據(jù),會(huì)出現(xiàn)403的錯(cuò)誤,大家知道該如何解決嗎?下面由腳本之家小編給大家分享兩種解決辦法,需要的朋友可以參考下2015-09-09