ajax+servlet实现省份城市动态效果 demo
【JSP】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'one.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//---------------------------------------------------------------------------
var req;
function getResult(state,basePath){
//alert("state:"+state);
var url = basePath+"/SelectCityServlet?state="+state;
//alert(url);
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveObject){
req = new ActiveObject("Microsoft.XMLHTTP");
}
alert(req);
if(req){
req.open("GET",url,true);
req.onreadystatechange=complete;
req.send(null);
alert("last");
}
}
//--------------------------------------------------------------------------------
/*
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化（在调用 open() 之前）
1: 服务器连接已建立（调用 send() 之前）
2: 请求已接收这里通常可以从响应得到内容头部）
3: 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4: 请求已完成，且响应已就绪（可以访问服务器响应并使用它）
status
200: "OK"
404: 未找到页面
*/
function complete(){
if(req.readyState==4 && req.status==200){
//alert("req.status:"+req.status);
var city = req.responseXML.getElementsByTagName("city");
//alert("city.length:"+city.length);
var str=new Array();
for(var i = 0 ; i <city.length;i++){
//alert("for");
str[i]=city[i].firstChild.data;
}
//alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
//---------------------------------------------------------------------------------------
function buildSelect(str,sel){
sel.options.length=0;
for(var i =0;i<str.length;i++){
sel.options[sel.options.length]= new Option(str[i],str[i]);
}
}
</script>
</head>
<body>
<select name="state" onChange="getResult(this.value,'<%=basePath %>')">
<option value="">Select</option>
<option value="zj">ZEHJIANG</option>
<option value="zs">JIANGSU</option>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
【servlet】
package com.wh;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SelectCityServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public SelectCityServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String state = request.getParameter("state");
StringBuffer sb = new StringBuffer("<state>");
if("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>");
}else if("zs".equals(state)){
sb.append("<city>nanjing</city><city>suzhou</city><city>yangzhou</city>");
}
sb.append("</state>");
PrintWriter out =response.getWriter();
out.write(sb.toString());
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
【WEB.XML】
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.wh.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/SelectCityServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
这种方式 比较简单，就酱紫==
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
oh ,god!
忘了，上面是用的字母
呃……
换成中文出现乱码的话就需要在servlet里面设置下相应的编码格式，即：
response.setCharacterEncoding("UTF-8");和JSP中的编码格式一致
从servlet传给JSP页面的中文显示就不会出现乱码了
QQQ