AJAX实现简单的省市二级联动 -

麦田1990

浏览: 72621 次

最近访客更多访客>>

qiushuzhao

wu4517519

苏羽垄

linshuxin111

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (275)

社区版块

存档分类

AJAX实现简单的省市二级联动

基本思路：前台的下拉框值改变时，AJAX将值传入后台的servlet进行处理，根据不同的值返回不同的JSON数据，然后前台进行解析成字符数组，添加到option中.

index.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 'index.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 xmlHttpRequest;
	function createXmlHttpRequest() {
		if (window.XMLHttpRequest) {
			xmlHttpRequest = new XMLHttpRequest();
		} else {
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function getCity(value) {
		createXmlHttpRequest();
		xmlHttpRequest.open("POST", "cityAction?value="+value,true); //将value传递到后台的servlet 
		xmlHttpRequest.onreadystatechange = showMsgCallback;
		xmlHttpRequest.send(null);
	}

	function showMsgCallback() {
		if (xmlHttpRequest.readyState == 4) {
			if (xmlHttpRequest.status == 200) {
				var str = eval("("+xmlHttpRequest.responseText+")"); //JSON格式转换为字符数组 
				if(str!=null&&str!=""){
					document.getElementById("city").options.length=0;    //将原有的选项清空  
					document.getElementById("city").options.add(new Option("--选择"));
					for(var i=0;i<str.length;i++){  //遍历数组  
					    var option = document.createElement("option");   //创建一个 option
					    option.text = str[i];  //设置显示的值 
					    option.value = str[i]; //设置value属性值 
					    document.getElementById("city").options.add(option);   //将新建的option添加到select中 
					}    
				}else{  
					document.getElementById("city").options.length=0;    
					document.getElementById("city").options.add(new Option("--选择"));
				}
				       
			}
		}
	}
</script>
	</head>
	<body>
		省:
		<select onchange="getCity(this.value)">
			<option>
				--选择
			</option>
			<option value="北京">
				北京
			</option>
			<option value="深圳">
				深圳
			</option>
			<option value="河南">
				河南
			</option>
		</select>
		城市:
		<select id="city">
			<option>
				--选择
			</option>
		</select>
	</body>
</html>

Servlet: CityAction.java

package com.org;

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 CityAction extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String province = request.getParameter("value");
		StringBuffer buf = new StringBuffer("[");
		//数据只是测试   通常是从数据库中取出数据
		if("北京".equals(province)){
			buf.append("\"").append("海淀").append("\"").append(",");
			buf.append("\"").append("朝阳").append("\"").append(",");
			buf.append("\"").append("昌平").append("\"").append(",");
			buf.append("\"").append("大兴").append("\"");
			buf.append("]");
			out.print(buf);
			System.out.println(buf);
		}else if("深圳".equals(province)){
			buf.append("\"").append("福田").append("\"").append(",");
			buf.append("\"").append("罗湖").append("\"").append(",");
			buf.append("\"").append("南山").append("\"").append(",");
			buf.append("\"").append("盐田").append("\"");
			buf.append("]");
			out.print(buf);
			System.out.println(buf);
		}else if("河南".equals(province)){
			buf.append("\"").append("郑州").append("\"").append(",");
			buf.append("\"").append("新乡").append("\"").append(",");
			buf.append("\"").append("洛阳").append("\"").append(",");
			buf.append("\"").append("商丘").append("\"");
			buf.append("]");
			out.print(buf);
			System.out.println(buf);
		}else{
			out.print("[\"\"]");
		}
		System.out.println(province+"******");
		out.flush();
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}

}