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

最新推荐文章于 2024-04-23 18:52:22 发布

iteye_7399

最新推荐文章于 2024-04-23 18:52:22 发布

阅读量983

点赞数

分类专栏： Ajax实现省市二级联动（源代码） java 文章标签： Ajax实现省市二级联动（源代码） java 工作

java 同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

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

1 篇文章 0 订阅

订阅专栏

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" οnchange="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="[url=http://java.sun.com/xml/ns/j2ee]http://java.sun.com/xml/ns/j2ee[/url]" 
xmlns:xsi="[url=http://www.w3.org/2001/XMLSchema-instance]http://www.w3.org/2001/XMLSchema-instance[/url]" 
xsi:schemaLocation="[url=http://java.sun.com/xml/ns/j2ee]http://java.sun.com/xml/ns/j2ee[/url] [url=http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd]http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd[/url]"> 
<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="http://hi.csdn.net/attachment/201110/13/0_1318494126FAH2.gif">

iteye_7399

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现省市二级联动（源代码）

1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp) 省市联动 var xhr;function change(provinceId){ //如果选择"==请选择==" 清空城市下拉列表if(provinceId=='0'){clearCity();return;}//创建XMLH...
复制链接

扫一扫