ホームページ > 記事 > ウェブフロントエンド > AJAX 都道府県市区町村の 3 レベル連携ドロップダウン メニュー (Java 版)
このアプレットの機能は主に、非同期リクエスト メソッドを使用してデータベースから州と市の情報を取得し、ドロップダウン リストに表示することです:
コードは次のとおりです:
データベースを作成するコードといくつかのコード設定ファイルの情報は省略されており、主に 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 ページのコードは次のとおりです:
Location
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("<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(); } } } }
AJAX の州と市の 3 レベルの連携の詳細については、ドロップダウン メニュー (Java バージョン) 関連記事、PHP 中国語 Web サイトにご注意ください。