Ajax + Struts 實現省市聯動詳解

想實現一個省市聯動菜單,斷斷續續研究了好長時間,現在終於通過自己的努力實現了.
過程詳解:
準備工作:
一個XML文件:

xml 代碼

xml version="1.0" encoding="GBK"?>
<china>
    <province name="直轄市">
        <city>北京city>
        <city>上海city>
        <city>天津city>
        <city>重慶city>
    province>
    <province name="廣東">
        <city>廣州city>
        <city>珠海city>
        <city>深圳city>
        <city>東莞city>
    province>
    <province name="廣西">
        <city>桂林city>
        <city>柳州city>
        <city>北海city>
        <city>南寧city>
    province>
    <province name="海南">
        <city>海口city>
        <city>三亞city>
    province>
    <province name="湖北">
        <city>武漢city>
        <city>鄂州city>
        <city>荊州city>
        <city>十堰city>
    province>
    <province name="湖南">
        <city>長沙city>
        <city>岳陽city>
        <city>常德city>
        <city>張家界city>
    province>
    <province name="浙江">
        <city>杭州city>
        <city>紹興city>
        <city>寧波city>
        <city>台州city>
    province>
    <province name="遼寧">
        <city>瀋陽city>
        <city>大連city>
        <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>
    <form-bean name="selectForm" type="com.selectdemo.struts.form.SelectForm" />
form-beans>
<action-mappings>

    <action path="/getProvince" type="com.selectdemo.struts.action.GetProvinceAction">
        <forward name="success" path="/select.jsp"/>
    action>

    <action path="/select" scope="request" input="/select.jsp" name="selectForm"
        type="com.selectdemo.struts.action.SelectAction">
    <forward name="success" path="/getProvince.do" />
action>

然後是顯示的JSP頁面

xml 代碼

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html"  prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>

<html:html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <title>Insert title heretitle>
head>
<script type="text/javascript">
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<results.length; i++){
        option = document.createElement("option");
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
        citySelect.appendChild(option);
    }
}
script>
<body>
    <html:form action="/select" method="post">
        <logic:present name="provinces" scope="request">
            <html:select property="province" styleId="province" onchange="selectProvince();">
                <html:option value="">請選擇省份html:option>
                <html:options name="provinces" labelName="provinces" />
            html:select>

            <html:select property="city" styleId="city" style="width:90px">
                <html:option value="">請選擇城市html:option>
            html:select>
        logic:present>
        <html:submit>html:submit>
    html:form>
    <br/>省份:
    <logic:present name="province" scope="request">
        <bean:write name="province" scope="request"/>
    logic:present>
    <br/>城市:
    <logic:present name="city" scope="request">
        <bean:write name="city" scope="request"/>
    logic:present>
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("<citys>");
        for(int i=0; i<citys.size(); i++){
            results.append("<city>");
            results.append(citys.get(i));
            results.append("</city>");
        }
        results.append("</citys>");
        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);
    }
}

 

好了,到這裏後,就大功告成了.