使用Servlet Ajax 实现局部刷新下拉列表(附source)

congpeixue

浏览: 274837 次
性别:
来自: ...

最近访客更多访客>>

stephen2015

tanglong8848

FTF372746926

cnhj352

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Servlet

Servlet Ajax Java SQL JSP

最近由于项目需要，趁今晚有时间写了个DEMO，附上源码，与大家共勉之。

把Servlet和jsp贴上

1 一个粗糙的Servlet

package com.chinasunzone.h2.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

import com.chinasunzone.h2.domain.Province;
import com.chinasunzone.h2.util.DBUtils;
import com.chinasunzone.h2.viewObject.ViewObject;

/**
 * Servlet implementation class for Servlet: ProvinceSelectServlet
 * 
 */
public class ProvinceSelectServlet extends javax.servlet.http.HttpServlet
		implements javax.servlet.Servlet {

	// INTI
	private static final String INIT = "1";
	
	// SELECT
	private static final String SELECT = "2";
	
	static final long serialVersionUID = 1L;

	/*
	 * (non-Java-doc)
	 * 
	 * @see javax.servlet.http.HttpServlet#HttpServlet()
	 */
	public ProvinceSelectServlet() {
		super();
	}

	/*
	 * (non-Java-doc)
	 * 
	 * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request,
	 *      HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/*
	 * (non-Java-doc)
	 * 
	 * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request,
	 *      HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		Connection conn = null;

		ViewObject viewObject = new ViewObject();
		
		RequestDispatcher dispatcher = null;
		
		List<Province> provinces = new ArrayList<Province>();

		String handle = request.getParameter("handle");

		
		// 
		if (INIT.equals(handle)) {
			
			// exception may be accor
			conn = DBUtils.getConnection();
			try {
				PreparedStatement preparedStatement = conn
						.prepareStatement("SELECT ID, NAME FROM PROVINCE");
				ResultSet rs = preparedStatement.executeQuery();
				while (rs != null && rs.next()) {
					Province province = new Province();
					province.setId(rs.getInt("id"));
					province.setName(rs.getString("name"));
					provinces.add(province);
				}
				viewObject.setProvince(provinces);
				request.setAttribute("viewObject", viewObject);
				dispatcher = request.getRequestDispatcher("/page/select_province.jsp");
			} catch (SQLException e) {
				e.printStackTrace();
			} finally {
				DBUtils.closeConnection(conn);
			}
			dispatcher.forward(request, response);
			// 
		} else if (SELECT.equals(handle)) {
			conn = DBUtils.getConnection();
			response.setContentType("text/xml");
			response.setHeader("Cache-Control", "no-cache");
			response.setCharacterEncoding("UTF-8");
			Integer provinceId = Integer.parseInt(request.getParameter("provinceId"));
			try {
				
				//  preparestatement can't bu use.
				String SELECT_CITY_BY_PROVINCEID = "SELECT ID, NAME FROM CITY WHERE PROVINCE_ID=" + provinceId;
				
				ResultSet rs = conn.createStatement().executeQuery(SELECT_CITY_BY_PROVINCEID);

				StringBuilder sb = new StringBuilder("<province>");
				while(rs != null && rs.next()) {
					sb.append("<city><id>" + rs.getInt("id") + "</id><name>" + rs.getString("name") + "</name></city>");
				}
				sb.append("</province>");
				PrintWriter out = response.getWriter();
				
				out.write(sb.toString());
				out.close();
			} catch (SQLException e) {
				e.printStackTrace();
			} finally {
				DBUtils.closeConnection(conn);
			}
		}
	}
}

2 简单的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%--
 	auther	: cong_px
 	date	: 2008/10/18
 	version	: 1.0.0
 --%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html>
<head>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
		/**
		 *return XMLHttpRequest
		 *
		 */
		function getCity(provinceId) {
		　　 var url = "ProvinceSelectServlet?handle=2&provinceId="+provinceId; 
		　　 if (window.XMLHttpRequest) { 
		　　 	req = new XMLHttpRequest(); 
		　　 }else if (window.ActiveXObject) { 
		　　 	req = new ActiveXObject("Microsoft.XMLHTTP"); 
		　　 } 
		　　 if(req){ 
				// 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
			　　 req.open("GET",url, true); 
				// 每次 readyState 属性改变的时候调用的事件句柄函数
			　　 req.onreadystatechange = complete; 
				// 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
			　　 req.send(null); 
		　　 } 
		} 
		
		/**
		 * query XML
		 *
		 */
		function complete(){
		　　 if (req.readyState == 4) { 
		　　 if (req.status == 200) { 
			　　 var city = req.responseXML.getElementsByTagName("city");
			　　 var cityIds = new Array();
				var cityNames = new Array();
			　　 for(var i = 0;i < city.length; i++){
					cityIds[i] = city[i].childNodes[0].firstChild.data;
					cityNames[i] = city[i].childNodes[1].firstChild.data;
			　　 }
			　　 buildSelect(cityIds, cityNames, document.getElementById("cityId"));
			　　 }
		　　 }
		}
		
		/**
		 * print select
		 *
		 */
		function buildSelect(cityIds, cityNames, select) {
		　　 select.options.length = 0;
			select.options[0] = new Option("", "");
		　　 for(var i = 1;i < cityIds.length; i++) {
		　　 	select.options[select.options.length] = new Option(cityNames[i-1], cityIds[i-1]);
		　　 }
		}
	</script>
	<title></title>
</head>
<body>
	<select name="province" onchange="getCity(this.value)">
		<option></option>
		<c:forEach var="province" items="${viewObject.provinces}">
		<option value="${province.id} ">${province.name }</option>
		</c:forEach>
	</select>
	<select id="cityId" name="city">
		<option></option>
	</select>
	<input type="text" name="address" value="汽轮大厦10楼">
</body>
</html>

关于在jetty中启动此web服务，请参照http://congpeixue.iteye.com/admin/blogs/254664