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