AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)
更新時間:2016年01月13日 14:58:26 作者:阿坤
這篇文章主要介紹了AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)的相關(guān)資料,需要的朋友可以參考下
此小程序的功能主要是采用異步請求方式從數(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(); } } } }
主要的功能代碼都在上面了,如有不懂的請聯(lián)系QQ:1037139984,祝大家都有好的發(fā)展,共同學習,共同成長。
相關(guān)文章
IDEA 重新導(dǎo)入依賴maven 命令 reimport的方法
這篇文章主要介紹了IDEA 重新導(dǎo)入依賴maven 命令 reimport的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04SpringBoot+React實現(xiàn)計算個人所得稅
本文將以個人所得稅的計算為例,使用React+SpringBoot+GcExcel來實現(xiàn)這一功能,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下2023-09-09Javaweb使用cors完成跨域ajax數(shù)據(jù)交互
本文由跨域、cors的概念開始,進而向大家介紹了Javaweb使用cors完成跨域ajax數(shù)據(jù)交互的相關(guān)內(nèi)容,需要的朋友可以了解下。2017-09-09