ajax+servlet实现省份城市动态效果 demo

最新推荐文章于 2024-11-04 20:33:37 发布

iteye_2413

最新推荐文章于 2024-11-04 20:33:37 发布

阅读量147

点赞数

文章标签： java javascript web.xml ViewUI

【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

iteye_2413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫