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 サイトにご注意ください。