实现一个省市联动菜单,断断续续研究了好长时间,现在终于通过自己的努力实现了.
过程详解:
准备工作:
一个XML文件:
xml 代码
xml version="1.0" encoding="GBK"?>
北京city>
上海city>
天津city>
重庆city>
province>
广州city>
珠海city>
深圳city>
东莞city>
province>
桂林city>
柳州city>
北海city>
南宁city>
province>
海口city>
三亚city>
province>
武汉city>
鄂州city>
荆州city>
十堰city>
province>
长沙city>
岳阳city>
常德city>
张家界city>
province>
杭州city>
绍兴city>
宁波city>
台州city>
province>
沈阳city>
大连city>
抚顺city>
铁岭city>
province>
china>
用一个Java类来解析这个XML文件,我用的是JDOM,实现的功能为能够获取所有省份,和传入省份的集合(用于Jsp页面显示),可以获取相应的城市集合.
java 代码
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.input.SAXBuilder;
public class ReadXml {
private Element root = null;
public ReadXml() throws FileNotFoundException, JDOMException, IOException {
super();
SAXBuilder sb = new SAXBuilder();//解析器对象
Document doc = sb.build(this.getClass().getResourceAsStream("/city.xml"
);//绑定文件
root = doc.getRootElement();//获取根元素
}
public List getProvince(){//获取省份
ArrayList provinceList = new ArrayList();
List tempList = root.getChildren();//获取所有省份节点
for(int i=0; i
Element province=(Element)tempList.get(i);//子节点转型
provinceList.add(province.getAttributeValue("name"
);//获取省份节点属性内容
}
return provinceList;
}
public List getCity(String province){
ArrayList cityList = new ArrayList();
List provincetemplist = root.getChildren();//省份集合
for(int i=0; i
Element provinceElement = (Element)provincetemplist.get(i);
if((provinceElement.getAttributeValue("name"
).equals(province)){//如果属性为传进来的名称
List cityTempList = provinceElement.getChildren();//获取子节点集合
for(int j=0; j//循环
Element cityElement = (Element)cityTempList.get(j);//当前城市节点
cityList.add(cityElement.getTextTrim());//增加城市到集合
}
}
}
return cityList;
}
}
准备工作完毕,建一个Struts工程
写一个Action,用来获取省份集合
java 代码
public class GetProvinceAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws FileNotFoundException, JDOMException, IOException {
ReadXml rx = new ReadXml();
List provinces = rx.getProvince();//获取省份
request.setAttribute("provinces", provinces);//放入request中
return mapping.findForward("success"
;
}
}
先通过此Action,然后再显示首页,这样省的下拉框里就有值了.
我先把Struts-Config.XML文件贴出来
xml 代码
form-beans>
action>
action>
然后是显示的JSP页面
xml 代码
Insert title heretitle>
head>
var xmlHttp;
// 创建xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"
;
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
// 删除城市选项
function clearCityList(){
var citys = document.getElementById("city"
;
while(citys.childNodes.length > 0){
citys.removeChild(citys.childNodes[0]);
}
}
//选项省份时
function selectProvince(){
var province = document.getElementById("province"
.value;//获取省份值
if(province == ""
{ //如果为空,则清空城市选项
clearCityList();
var citySelect = document.getElementById("city"
; //获取城市select组件
var option = document.createElement("option"
;
option.appendChild(document.createTextNode("请选择城市"));
citySelect.appendChild(option);
return ; //返回
}
//服务器处理地址,是一个Servlet
var url = "http://localhost:8080/SelelctDemo/servlet/Linkage?province=" + encodeURIComponent(province) + "&ts=" + new Date().getTime();
createXMLHttpRequest();//创建xmlHttp对象;
xmlHttp.onreadystatechange = handleStateChange; //回调函数
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
//回调函数
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
updateCitysList();
}
}
}
//页面更新城市集合函数
function updateCitysList(){
clearCityList();//首先删除先前的城市选项
var citySelect = document.getElementById("city"); //获取城市select组件
var results = xmlHttp.responseXML.getElementsByTagName("city");//获取Ajax返回的结果,city为返回的XML里的节点
var option = null;
for(var i=0; i
请选择省份html
ption>
html:select>
请选择城市html
ption>
html:select>
logic
resent>
html:submit>
html:form>
省份:
logic
resent>
城市:
logic
resent>
body>
html:html>
下面是按处理Ajax的Servlet
java 代码
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.jdom.JDOMException;
import com.selectdemo.tool.ReadXml;
public class Linkage extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String province = request.getParameter("province"); //获取参数中的值
System.out.println(province);
ReadXml rx;
List citys = null;
try {
rx = new ReadXml();
citys = rx.getCity(province);
} catch (JDOMException e) {
e.printStackTrace();
}
System.out.println(citys.size());
//组装城市选项
StringBuffer results = new StringBuffer("");
for(int i=0; i");
results.append(citys.get(i));
results.append("");
}
results.append("");
response.setContentType("text/xml;");
PrintWriter pw = response.getWriter();
System.out.println(results.toString());
pw.print(results.toString());
pw.flush();
pw.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
Servlet处理完后,返回到JSP页面,会传给JSP页面一个XML文档,以字符串的形式传过去的,JSP页面解析这个String,从而增加城市选项的下拉列表
点击submit后,用一个Action接收,看值传进来没有
java 代码
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.selectdemo.struts.form.SelectForm;
public class SelectAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/html;charset=UTF-8");
SelectForm sf = (SelectForm)form;
String province = sf.getProvince();
System.out.println(province);
String city = sf.getCity();
System.out.println(city);
request.setAttribute("province", province);
request.setAttribute("city", city);
return mapping.findForward("success");
}
}
这里,你会发现,传进来的值会是乱码,解决乱码我写了一个MyActionServlet
java 代码
import org.apache.struts.action.ActionServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MyActionServlet extends org.apache.struts.action.ActionServlet
{
protected void process(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, javax.servlet.ServletException
{
request.setCharacterEncoding("UTF-8");
super.process(request, response);
}
}
好了,到这里后,就大功告成了.
|
