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 + "/"; 
%> 
 
 
 
	 
		 
 
		 
		 
		 
		 
		 
		 
		 
 
	 
	 
		省: 
		 
			 
				--选择 
			 
			 
				北京 
			 
			 
				深圳 
			 
			 
				河南 
			 
		 
		城市: 
		 
			 
				--选择 
			 
		 
	 
 

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); 
	} 
 
}