使用dom4j+jquery的一个省份级联市的demo

在客户端与服务器端交互时，通常使用的数据格式有xml和json，网上也溜达了一些，很多都说json更适合用作数据交互的格式。

这个demo是很久以前写的，稍后在贴一个json的简单例子。

在java web开发中，如果使用jdk 中的xml api 进行数据的解析，很是麻烦。而一些好的解析xml的框架有jdom 、dom4j等。这里就使用dom4j进行演示。

1、最开始当然是扎好架子了，从网上找到dom4j的jar包，加入到lib文件中，并下载jquery的源文件加入到WebContent中。

2、完成服务器端的Servlet程序：

package net.hnspi.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

import net.hnspi.util.DBManager;


public class MenuServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    DBManager db = null;
    PreparedStatement pstmt = null;


    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        String type = request.getParameter("type");
        response.setContentType("text/xml;charset=gb2312");
        if (type.equals("province")) {
            try {
                responseProvince(response);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (type.equals("city")) {
            String provinceId = request.getParameter("provinceId");
            try {
                responseCity(response, provinceId);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 取得所有省份的数据返回给客户端
     * 
     * @param response
     * @throws SQLException
     * @throws IOException
     */
    private void responseProvince(HttpServletResponse response)
            throws SQLException, IOException {
        db = new DBManager();
        String sql = "select provinceId,provinceName from province";
        pstmt = db.getDataBaseConnection().prepareStatement(sql);
        ResultSet rs = pstmt.executeQuery();
        writeXML(rs, "provinces", "province", response);
        db.realse();
    }

    /**
     * 根据省份id取得城市列表信息返回给客户端
     * 
     * @param response
     * @param provinceId 省份id
     * @throws SQLException
     * @throws IOException
     */
    private void responseCity(HttpServletResponse response, String provinceId)
            throws SQLException, IOException {
        db = new DBManager();
        String sql = "select cityId,cityName from city where provinceId=?";
        pstmt = db.getDataBaseConnection().prepareStatement(sql);
        pstmt.setString(1, provinceId);
        ResultSet rs = pstmt.executeQuery();
        writeXML(rs, "citys", "city", response);
        db.realse();
    }

    /**
     * 将数据库取得的数据使用dom4j转换为xml格式数据返回给客户端
     * 
     * @param rs 数据库中取得的结果集
     * @param root 根标签
     * @param child 子标签
     * @param response
     * @throws SQLException
     * @throws IOException
     */
    private void writeXML(ResultSet rs, String root, String child,
            HttpServletResponse response) throws SQLException, IOException {
        Document doc = DocumentHelper.createDocument();
        String provinceId = "";
        String provinceName = "";
        Element rootElement = doc.addElement(root);
        while (rs.next()) {
            provinceId = rs.getString(1);
            provinceName = rs.getString(2);
            Element childElement = rootElement.addElement(child);
            childElement.addAttribute("id", provinceId);
            childElement.setText(provinceName);
        }
        OutputFormat format = OutputFormat.createPrettyPrint();
        format.setEncoding("gb2312");
        PrintWriter out = response.getWriter();
        XMLWriter xmlWriter = new XMLWriter(out, format);
        xmlWriter.write(doc);
        out.close();
        xmlWriter.close();
    }


    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

}

不要忘了对Servlet在web.xml中进行配置(Eclipse中自动完成)web.xml

  <servlet>
    <description></description>
    <display-name>MenuServlet</display-name>
    <servlet-name>MenuServlet</servlet-name>
    <servlet-class>net.hnspi.servlet.MenuServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>MenuServlet</servlet-name>
    <url-pattern>/menuServlet.do</url-pattern>
  </servlet-mapping>

3、完成与服务端进行交互的js文件(注意要先导入jquery.js) menu.js

$(document).ready(function(){
	$.ajax({
		type:"post" ,
		url:"menuServlet.do",
		data:"type=province",
		dataType:"xml",
		success:getProvince ,
	}) ;
}) ;

function getProvince(data){
	var xml = $(data) ;
	var nodes = xml.find("province") ;
	var selPro = $("#province") ;
	selPro.change(getCityByProvince) ;
	selPro.html("") ;
	$('<option value=0>==选择省份==</option>').appendTo(selPro) ;
	nodes.each(function(){
		var node = $(this) ;
		var opt = $("<option>") ;
		opt.attr('value',node.attr("id")) ;		
		opt.html(node.text()).appendTo(selPro) ;
//		$('<option>').attr('value',attribute).html(node.text()).appendTo(selPro) ;
	}) ;
}

function getCityByProvince(){
	$.post("menuServlet.do","type=city&provinceId="+$(this).val(),getCity,"xml") ;	
}

function getCity(data){
	var xml = $(data) ;
	var nodes = xml.find("city") ;
	var selCity = $("#city") ;
	selCity.html("") ;
	$('<option value=0>==请选择市==</option>').appendTo(selCity) ;
	nodes.each(function(){
		var node = $(this) ;
		var opt = $("<option>") ;
		opt.attr('value',node.attr()) ;
		opt.html(node.text()).appendTo(selCity) ;
	}) ;
}

ok,总体的程序已经完成，其中的一些路劲之类的自己调一下就可以正常运行了，小弟，也是初学者，欢迎各位大虾拍砖，多多指教！！