AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
此小程序的功能主要是采用異步請(qǐng)求方式從數(shù)據(jù)庫中調(diào)取省市區(qū)信息顯示到下拉列表:
代碼如下:
建立數(shù)據(jù)庫中的代碼和一些配置文件信息就省略了,主要有JavaScript中的代碼為:
$(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(document).ready(function(){ $("#show2").html(""); }) var show = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show"); show.innerHTML = ""; var province = document.getElementByIdx_x_x_x_x_x_x_x_x_x("province").value; if(province!=0){ if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ show.innerHTML = xmlhttp.responseText; } } var ss = encodeURIComponent(str); xmlhttp.open("GET","getCity.do?provinceid="+ss,true); xmlhttp.send(null); } } function myarea(str){ if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ var show2 = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show2"); show2.innerHTML = xmlhttp.responseText; } } var ss = encodeURIComponent(str); xmlhttp.open("GET","getArea.do?cityid="+ss,true); xmlhttp.send(null); }
html頁面中的代碼為:
所在地
action中的代碼為:
package mobi.zhangsheng.jiejia.action; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import org.springframework.stereotype.Controller; import mobi.zhangsheng.jiejia.domain.Areas; import mobi.zhangsheng.jiejia.service.AgentsService; import mobi.zhangsheng.jiejia.service.AreasService; @Controller public class ProvinceAction { private int provinceid; private int cityid; @Resource private AreasService as; @Resource private AgentsService ags; public int getProvinceid() { return provinceid; } public void setProvinceid(int provinceid) { this.provinceid = provinceid; } public int getCityid() { return cityid; } public void setCityid(int cityid) { this.cityid = cityid; } public void getProvince(){ List provinceList = as.getAreasPrvinceList(); HttpServletResponse resp= ServletActionContext.getResponse(); HttpServletRequest request = ServletActionContext.getRequest(); //resp.setContentType("xml"); resp.setContentType("text/html"); resp.setCharacterEncoding("utf-8"); try { PrintWriter out = resp.getWriter(); out.print(""); //out.print("shanghai"); } catch (IOException e) { e.printStackTrace(); } } public void getCity(){ List cityList = as.getAreasCityList(provinceid); HttpServletResponse resp= ServletActionContext.getResponse(); //resp.setContentType("xml"); resp.setContentType("text/html"); resp.setCharacterEncoding("utf-8"); try { PrintWriter out = resp.getWriter(); out.print("
"); //out.print("shanghai"); } catch (IOException e) { e.printStackTrace(); } } public void getArea(){ List areaList = as.getAreasCityList(cityid); if(areaList.size()==0){ }else{ HttpServletResponse resp= ServletActionContext.getResponse(); resp.setContentType("text/html"); resp.setCharacterEncoding("utf-8"); try { PrintWriter out = resp.getWriter(); out.print("
"); } catch (IOException e) { e.printStackTrace(); } } } }
主要的功能代碼都在上面了,如有不懂的請(qǐng)聯(lián)系QQ:1037139984,祝大家都有好的發(fā)展,共同學(xué)習(xí),共同成長。
相關(guān)文章
IDEA 重新導(dǎo)入依賴maven 命令 reimport的方法
這篇文章主要介紹了IDEA 重新導(dǎo)入依賴maven 命令 reimport的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04SpringBoot+React實(shí)現(xiàn)計(jì)算個(gè)人所得稅
本文將以個(gè)人所得稅的計(jì)算為例,使用React+SpringBoot+GcExcel來實(shí)現(xiàn)這一功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-09-09java實(shí)現(xiàn)投票程序設(shè)計(jì)
這篇文章主要介紹了java實(shí)現(xiàn)投票程序設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12利用java反射機(jī)制調(diào)用類的私有方法(推薦)
下面小編就為大家?guī)硪黄胘ava反射機(jī)制調(diào)用類的私有方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08Javaweb使用cors完成跨域ajax數(shù)據(jù)交互
本文由跨域、cors的概念開始,進(jìn)而向大家介紹了Javaweb使用cors完成跨域ajax數(shù)據(jù)交互的相關(guān)內(nèi)容,需要的朋友可以了解下。2017-09-09SSM項(xiàng)目實(shí)現(xiàn)短信驗(yàn)證碼登錄功能的示例代碼
這篇文章主要為大家分享了在SSM項(xiàng)目中實(shí)現(xiàn)短信驗(yàn)證碼登錄功能的示例代碼,文中的實(shí)現(xiàn)步驟講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-05-05Java 3種方法實(shí)現(xiàn)進(jìn)制轉(zhuǎn)換
這篇文章主要介紹了Java 3種方法實(shí)現(xiàn)進(jìn)制轉(zhuǎn)換,幫助大家利用Java處理數(shù)據(jù),感興趣的朋友可以了解下2020-09-09