Ajax实现省市二级联动（源代码）_JAVA

您所在的位置：程序员俱乐部 > 编程开发 > JAVA > Ajax实现省市二级联动（源代码）

Ajax实现省市二级联动（源代码）

2011/12/28 17:55:33 lucene3212 http://lucene3212.iteye.com 我要评论(0)

摘要：<spanstyle="font-family:TimesNewRoman;font-size:16px;">1、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp)<spanstyle="font-family:TimesNewRoman;font-size:16px;"><%@pagelanguage="java"pageEncoding="gbk"%> <
标签：实现 Ajax 代码

1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp)

<%@ page language="java" pageEncoding="gbk"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>省市联动</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"> 
<script type="text/javascript"> 
var xhr; 
function change(provinceId){ 
//如果选择"==请选择==" 清空城市下拉列表 
if(provinceId=='0'){ 
clearCity(); 
return; 
} 
//创建XMLHttpRequest对象 
createXmlHttp(); 
//设置回调函数 
xhr.onreadystatechange = response; 
//初始化 
xhr.open('GET','ListServlet.do?provinceId='+provinceId,true); 
//设置不使用缓存 
xhr.setRequestHeader("If-Modified-Since","0"); 
//发送请求 
xhr.send(null); 
} 
function response(){ 
var city = document.getElementById("city"); 
if(xhr.readyState == 4 && xhr.status == 200 ){ 
var s = xhr.responseText; 
var citys = s.split(","); 
clearCity(); 
for(var i=0;i<citys.length;i++){ 
city.options[city.options.length] = new Option(citys[i],citys[i]); 
} 
} 
} 
function createXmlHttp(){ 
//非IE浏览器创建XmlHttpRequest对象 
if(window.XmlHttpRequest){ 
xhr = new XmlHttpRequest(); 
} 
//IE浏览器创建XmlHttpRequest对象 
if(window.ActiveXObject){ 
try{ 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){ 
xhr = new ActiveXObject("msxml2.XMLHTTP"); 
} 
} 
} 
//清空城市下拉列表 
function clearCity(){ 
var city = document.getElementById("city"); 
city.options.length = 0; 
city.options[0] = new Option('==请选择==','0'); 
} 
</script> 
</head> 
<body> 
<h1>省市联动</h1><hr> 
<h3>Where Are You From ?</h3> 
省份：<select id="province" onchange="change(this.value)"> 
<option value="0">==请选择==</option> 
<option value="1">浙江</option> 
<option value="2">江苏</option> 
<option value="3">湖北</option> 
<option value="4">湖南</option> 
<option value="5">广东</option> 
</select> 
城市：<select id="city"> 
<option>==请选择==</option> 
</select> 
</body> 
</html> 
2、处理逻辑的servlert类 ListServlet.java

package com.test.ajax;

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.*;

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

public class ListServlet extends HttpServlet {

private static final long serialVersionUID = 1L; 
public static Map<String,List<String>> map= new HashMap<String,List<String>>(); 
public void init() throws ServletException{ 
List<String> list = new ArrayList<String>(); 
list.add("杭州"); 
list.add("绍兴"); 
list.add("宁波"); 
list.add("台州"); 
map.put("1", list); 
list = new ArrayList<String>(); 
list.add("南京"); 
list.add("苏州"); 
list.add("常州"); 
list.add("无锡"); 
map.put("2", list); 
list = new ArrayList<String>(); 
list.add("武汉"); 
list.add("鄂州"); 
list.add("荆州"); 
list.add("十堰"); 
map.put("3", list); 
list = new ArrayList<String>(); 
list.add("长沙"); 
list.add("岳阳"); 
list.add("常德"); 
list.add("张家界"); 
map.put("4", list); 
list = new ArrayList<String>(); 
list.add("广州"); 
list.add("珠海"); 
list.add("深圳"); 
list.add("东莞"); 
map.put("5", list); 
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String provinceId = request.getParameter("provinceId"); 
List<String> list = map.get(provinceId); 
StringBuffer sb = new StringBuffer(); 
if(list!=null){ 
for(String s: list) { 
sb.append(s).append(","); 
} 
if(!list.isEmpty()){ 
sb.deleteCharAt(sb.length()-1); 
} 
} 
response.setContentType("test/html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
out.print(sb.toString()); 
out.close(); 
}

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

3、web.xml 信息配置

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.4" 
xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
<servlet> 
<servlet-name>myServlet</servlet-name> 
<servlet-class>com.test.ajax.ListServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>myServlet</servlet-name> 
<url-pattern>/ListServlet.do</url-pattern> 
</servlet-mapping> 
<welcome-file-list> 
<welcome-file>list.jsp</welcome-file> 
</welcome-file-list> 
</web-app>

4、截图显示

<img alt="" src="/Upload/Images/2011122817/A1378D8BE2C62571.gif">

上一篇： hibernate使用sql查询text类型的字段出错下一篇：反汇编器-javap.exe