AJAX省市区三级联动下拉列表实现 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("show");
show.innerHTML = "";

var province = document.getElementByIdx_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("show2");
show2.innerHTML = xmlhttp.responseText;
}
}


var ss = encodeURIComponent(str);
xmlhttp.open("GET","getArea.do?cityid="+ss,true);
xmlhttp.send(null);
}

html页面中的代码为：

<div class="drink"><label class="label">所在地</label>
<span id="showp"></span>
<span id="show"></span>
<span id="show2"></span></div>

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("<select id='province' onchange='mysend(this.value)' name='province'>");
out.print("<option value='-1'>");
out.print("请选择省市");
out.print("</option>");
for(int i=0;i<provinceList.size();i++){
Areas area = (Areas) provinceList.get(i);
out.print("<option value='"+area.getAreaId()+"'>");
out.print(area.getAreaTitle());
out.print("</option>");
}

out.print("</select>");
//out.print("<xml><city>shanghai</city></xml>");
} 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("<select id='city' onchange='myarea(this.value)' name='city'>");
out.print("<option value='-1'>");
out.print("请选择市区");
out.print("</option>");
for(int i=0;i<cityList.size();i++){
Areas area = (Areas) cityList.get(i);
out.print("<option value='"+area.getAreaId()+"'>");
out.print(area.getAreaTitle());
out.print("</option>");
}

out.print("</select>");
//out.print("<xml><city>shanghai</city></xml>");
} 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("<select id='area' name='area'>");
out.print("<option value='-1'>");
out.print("请选择市区");
out.print("</option>");
for(int i=0;i<areaList.size();i++){
Areas area = (Areas) areaList.get(i);
out.print("<option value='"+area.getAreaId()+"'>");
out.print(area.getAreaTitle());
out.print("</option>");
}

out.print("</select>");

} catch (IOException e) {
e.printStackTrace();
}

}

}

} 主要的功能代码都在上面了，如有不懂的请联系QQ：1037139984，祝大家都有好的发展，共同学习，共同成长。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!