初学ajax,实现异步操作!
源代码下载链接:http://download.csdn.net/detail/yan13507001470/9911744
以下为三级联动下拉框部分代码
jsp页面部分代码
<table>
<tr>
<th>下拉框:</th>
<td>
<select id="provinceId" name="provinceId">
<option>请选择省份</option>
<c:forEach var="list" items="${allProvinces}" varStatus="vs">
<option value="${list.id }">${list.name }</option><!-- 将对应的id传到后台 -->
</c:forEach>
</select>
<select id="cityId" name="cityId">
<option>请选择城市</option>
</select>
<select id="countyId" name="countyId">
<option>请选择县区</option>
</select>
</td>
<td><input type="submit" value="submit"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("provinceId").onchange = function(){
//清空城市下拉框中的内容,除第一项
var cityElement = document.getElementById("cityId");
cityElement.options.length = 1;
//清空县下拉框中的内容,除第一项
var countyElement = document.getElementById("countyId");
countyElement.options.length = 1;
//获取选中option标签的索引号,从0开始
var index = this.selectedIndex;
var optionElement = this[index];
var provinceId = optionElement.getAttribute("value");//根据属性获取value的值 ,即id--${list.id }
//alert(provinceId)
provinceId = Number(provinceId);//将string转为number
//alert(typeof provinceId)
/*
//获取选中的option标签中的内容
var province = optionElement.innerHTML;
alert(province)
*/
if( 0 != provinceId){
var ajax = createAJAX();
//alert(ajax!=null)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityCountyServlet?method=ajaxone&time="+new Date().getTime();
ajax.open(method, url);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
var content = "provinceId="+provinceId;
ajax.send(content);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlDocument = ajax.responseXML;
var cityElementArray = xmlDocument.getElementsByTagName("city");
var size = cityElementArray.length;
for(var i=0; i<size;i++){
var city = cityElementArray[i].firstChild.nodeValue;
var optionElement = document.createElement("option"); //创建标签
var cityIdvalue = cityElementArray[i].getAttribute("value"); //cityIdValue是该下来框所对应的id值
optionElement.setAttribute("value", cityIdvalue); //给该标签创建属性
optionElement.innerHTML = city;
cityElement.appendChild(optionElement);
}
}
}
}
}
}
</script>
<script type="text/javascript">
document.getElementById("cityId").onchange = function(){
//清空县的下拉框中的内容,除第一项
var countyElement = document.getElementById("countyId");
countyElement.options.length = 1;
//获取选中option标签的索引号,从0开始
var index = this.selectedIndex;
var optionElement = this[index];
var cityId = optionElement.getAttribute("value");//根据属性获取value的值 ,即id--${list.id }
//alert(cityId)
cityId = Number(cityId);//将string转为number
if( 0 != cityId){
var ajax = createAJAX();
//alert(ajax!=null)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityCountyServlet?method=ajaxtwo&time="+new Date().getTime();
ajax.open(method, url);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
var content = "cityId="+cityId;
ajax.send(content);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlDocument = ajax.responseXML;
var countyElementArray = xmlDocument.getElementsByTagName("county");
var size = countyElementArray.length;
for(var i=0; i<size;i++){
var county = countyElementArray[i].firstChild.nodeValue;
var optionElement = document.createElement("option"); //创建标签
var countyIdvalue = countyElementArray[i].getAttribute("value"); //cityIdValue是该下来框所对应的id值
//alert(countyIdvalue)
optionElement.setAttribute("value", countyIdvalue); //给该标签创建属性
optionElement.innerHTML = county;
//alert('hello')
countyElement.appendChild(optionElement);
}
}
}
}
}
}
</script>
servlet代码
@WebServlet("/ProvinceCityCountyServlet")
public class ProvinceCityCountyServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");
if(method.equals("ajaxone")){
response.setContentType("text/xml;charset=utf-8");
String provinceId = request.getParameter("provinceId");
CityService cityService = new CityService();
List<City> allCities = cityService.findByFKId(Integer.parseInt(provinceId));
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");
for(int i=0;i<allCities.size();i++){
City city = allCities.get(i);
pw.write("<city value='"+city.getId()+"'>"+city.getName()+"</city>");
}
pw.write("</root>");
pw.flush();
pw.close();
}else if (method.equals("ajaxtwo")) {
response.setContentType("text/xml;charset=utf-8");
String cityId = request.getParameter("cityId");
CountyService countyService = new CountyService();
List<County> allCounties = countyService.findByFKId(Integer.parseInt(cityId));
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");
for(int i=0;i<allCounties.size();i++){
County county = allCounties.get(i);
pw.write("<county value='"+county.getId()+"'>"+county.getName()+"</county>");
}
pw.write("</root>");
pw.flush();
pw.close();
}else if (method.equals("fromSubmit")) { //提交获取数据
String countId = request.getParameter("countyId");
CountyService countyService = new CountyService();
County county = countyService.findById(Integer.parseInt(countId));
System.out.println("县:"+county.getName());
CityService cityService = new CityService();
City city = cityService.findById(county.getCity_id());
System.out.println("城市:"+city.getName());
ProvinceServince provinceServince = new ProvinceServince();
Province province = provinceServince.findById(city.getProvince_id());
System.out.println("省:"+province.getName());
System.out.println(province.getName()+"-"+city.getName()+"-"+county.getName());
}else {
ProvinceServince provinceServince = new ProvinceServince();
List<Province> allProvinces = provinceServince.findAll();
request.setAttribute("allProvinces", allProvinces);
request.getRequestDispatcher("/Province_city_county.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
注:有什么写的不对的地方,请提出来,感谢