Ajax实现省市二级联动(源代码)_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 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)</span><spanstyle="font-family:TimesNewRoman;font-size:16px;"><%@pagelanguage="java"pageEncoding="gbk"%><br><
  • 标签:实现 Ajax 代码

    <span style="font-family: Times New Roman; font-size: 16px;">1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp)</span>

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

<span style="font-family: Times New Roman; font-size: 16px;">package com.test.ajax;</span>

<span style="font-family: Times New Roman; font-size: 16px;">import java.io.IOException;<br>
import java.io.PrintWriter;<br>
import java.util.*;</span>

<span style="font-family: Times New Roman; font-size: 16px;">import javax.servlet.ServletException;<br>
import javax.servlet.http.HttpServlet;<br>
import javax.servlet.http.HttpServletRequest;<br>
import javax.servlet.http.HttpServletResponse;</span>

<span style="font-family: Times New Roman; font-size: 16px;">public class ListServlet extends HttpServlet {</span>

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

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

<span style="font-family: Times New Roman; font-size: 16px;">protected void doPost(HttpServletRequest request, HttpServletResponse response)<br>
throws ServletException, IOException {<br>
doGet(request, response);<br>
}<br>
}<br></span>

<span style="font-family: Times New Roman; font-size: 16px;">3、web.xml 信息配置</span>

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

<span style="font-family: Times New Roman; font-size: 16px;">4、截图显示</span>

<span style="font-family: Times New Roman; font-size: 16px;"><img alt="" src="/Upload/Images/2011122817/A1378D8BE2C62571.gif"></span>

 
发表评论
用户名: 匿名