Home > Article > Web Front-end > AJAX province and city three-level linkage drop-down menu (java version)
The function of this small program is mainly to use asynchronous request method to retrieve province and city information from the database and display it in the drop-down list:
The code is as follows:
Create the code in the database and some The configuration file information is omitted. The main code in JavaScript is:
$(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); }
The code in the html page is:
location
action The code is:
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("<img id="theimg" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201601/2016113145609190.png?2016013145623" alt="">"); //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("<img id="theimg" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201601/2016113145748247.png?201601314582" alt="">"); //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("<img id="theimg" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201601/2016113145524106.png?2016013145549" alt="">"); } catch (IOException e) { e.printStackTrace(); } } } }
For more AJAX provincial and municipal three-level linkage drop-down menu (java version) related articles, please pay attention to the PHP Chinese website!