Servlet
importjava.io.IOException;
importjava.io.PrintWriter;
/**
* Created by ozc on 2017/5/17.
*/
@javax.servlet.annotation.WebServlet(name="ProvinceServlet",urlPatterns="/ProvinceServlet")
publicclassProvinceServletextendsjavax.servlet.http.HttpServlet{
protectedvoiddoPost(javax.servlet.http.HttpServletRequestrequest,javax.servlet.http.HttpServletResponseresponse)throwsjavax.servlet.ServletException,IOException{
//设置中文编码
request.setCharacterEncoding("UTF-8");
Stringprovince=request.getParameter("province");
//这里是返回的是XML，因此指定XML数据！
response.setContentType("text/xml;charset=UTF-8");
PrintWriterprintWriter=response.getWriter();
/****************返回XML文件给前台**************/
printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
printWriter.write("<root>");
if("广东".equals(province)){
printWriter.write("<city>广州</city>");
printWriter.write("<city>深圳</city>");
printWriter.write("<city>中山</city>");
}elseif("湖南".equals(province)){
printWriter.write("<city>长沙</city>");
printWriter.write("<city>株洲</city>");
printWriter.write("<city>湘潭</city>");
printWriter.write("<city>岳阳</city>");
}
printWriter.write("</root>");
System.out.println("1111");
/*******事后操作*******/
printWriter.flush();
printWriter.close();
}
protectedvoiddoGet(javax.servlet.http.HttpServletRequestrequest,javax.servlet.http.HttpServletResponseresponse)throwsjavax.servlet.ServletException,IOException{
this.doPost(request,response);
}
}
效果：
XML方式总结
- 监听下拉框的变化，如果变化了，那么就使用异步操作去访问服务器，得到对应的数据返回给异步对象
- 异步对象解析服务器带过来的数据，使用DOM编程把数据动态添加到页面上
- 在Servlet上记得要指定返回的是XML的数据！
- 在前台解析XML文档的时候，不能直接使用innerHtml来得到节点的值，只能通过firstChild.nodeValue的方式获取。
- 由于每次append到下拉框都会连续append，因此在响应事件的时候，把下拉框清零
- 把下拉框options的长度赋值为1，那么就是清零的操作了。
AJAX二级下拉联动案例【JSON版】
前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互。当时候我们的案例是二级联动，使用Servlet进行控制
这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制....
- 省份-城市-区域三级联动【Struts2 + JSON版】
分析
与上次是一样的，只不过这次换了用JSON，使用Action控制罢了...
监听下拉框的变动，使用异步对象与服务器进行交互。
前台分析
- 监听下拉框的变动
- 得到服务器返回的JSON数据
- 使用eval()进行解析，得到具体的对象
- 使用DOM编程把数据填充到对应的下拉框上
后台分析
- 得到前台发送过来的数据
- 判断具体的数据是什么，给出对应的数据
- 使用Struts2提供的组件把数据封装成JSON
- 返回给浏览器
监听省份JSP页面
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/18
Time: 13:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用JSON数据载体与服务器进行交互</title>
<scripttype="text/javascript"src="js/ajax.js"></script>
</head>
<body>
<%--############前台页面##############################--%>
<selectname="province"id="provinceId">
<option>请选择省份</option>
<option>广东</option>
<option>北京</option>
</select>
<selectname="city"id="cityId">
<option>请选择城市</option>
</select>
<selectname="area"id="areaId">
<option>请选择区域</option>
</select>
<%--############监听省份##############################--%>
<scripttype="text/javascript">
document.getElementById("provinceId").onchange=function(){
// 得到选中的下拉框的值
varprovinceValue=this.options[this.selectedIndex].innerHTML;
/***************ajax代码*************************/
if("请选择省份"!=provinceValue){
//每次访问的时候，都要清空select的值
varcitySelect=document.getElementById("cityId");
citySelect.options.length=1;
varajax=createAJAX();
varmethod="post";
varurl="${pageContext.request.contextPath}/province_findCityByProvince?time="+newDate().getTime();
ajax.open(method,url);
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//顾及到发送的key、value值有很多，于是我们使用对象吧。
ajax.send("bean.name="+provinceValue);
/***************等待服务器的响应，得到服务器返回的数据************************/
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
varjsonJava=ajax.responseText;
//解析成是JS类型的JSON
varjson=eval("("+jsonJava+")");
//得到每个城市的值
for(vari=0;i<json.city.length;i++){
varcity=json.city[i];
//动态创建option控件
varoption=document.createElement("option");
option.innerHTML=city;
citySelect.appendChild(option);
}
}
}
};
}
};
</script>
</body>
</html>
