Created
July 24, 2012 09:56
-
-
Save pengju/3169176 to your computer and use it in GitHub Desktop.
Ajax技术实现省市级联的例子,其中servlet页面可以直接用service方法处理,减少代码量
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.kaishengit.web; | |
import java.io.IOException; | |
import java.io.PrintWriter; | |
import java.util.ArrayList; | |
import java.util.HashMap; | |
import java.util.List; | |
import java.util.Map; | |
import javax.servlet.ServletException; | |
import javax.servlet.http.HttpServlet; | |
import javax.servlet.http.HttpServletRequest; | |
import javax.servlet.http.HttpServletResponse; | |
import com.google.gson.Gson; | |
public class AjaxServlet extends HttpServlet { | |
private static final long serialVersionUID = 1L; | |
public void doGet(HttpServletRequest request, HttpServletResponse response) | |
throws ServletException, IOException { | |
Map<String, List<String>> province = new HashMap<String, List<String>>(); | |
List<String> hnList = new ArrayList<String>(); | |
hnList.add("郑州"); | |
hnList.add("新乡"); | |
hnList.add("焦作"); | |
hnList.add("开封"); | |
List<String> sxList = new ArrayList<String>(); | |
sxList.add("西安"); | |
sxList.add("宝鸡"); | |
sxList.add("渭南"); | |
sxList.add("汉中"); | |
List<String> gdList = new ArrayList<String>(); | |
gdList.add("广州"); | |
gdList.add("珠海"); | |
gdList.add("深圳"); | |
province.put("hn", hnList); | |
province.put("sx", sxList); | |
province.put("gd", gdList); | |
String name = request.getParameter("name"); | |
List<String> citys = province.get(name); | |
response.setContentType("text/json;charset=utf-8"); | |
Gson gson = new Gson(); | |
String json = gson.toJson(citys); | |
PrintWriter out = response.getWriter(); | |
out.print(json); | |
out.flush(); | |
out.close(); | |
} | |
public void doPost(HttpServletRequest request, HttpServletResponse response) | |
throws ServletException, IOException { | |
Map<String, List<String>> province = new HashMap<String, List<String>>(); | |
List<String> hnList = new ArrayList<String>(); | |
hnList.add("郑州"); | |
hnList.add("新乡"); | |
hnList.add("焦作"); | |
hnList.add("开封"); | |
List<String> sxList = new ArrayList<String>(); | |
sxList.add("西安"); | |
sxList.add("宝鸡"); | |
sxList.add("渭南"); | |
sxList.add("汉中"); | |
List<String> gdList = new ArrayList<String>(); | |
gdList.add("广州"); | |
gdList.add("珠海"); | |
gdList.add("深圳"); | |
province.put("hn", hnList); | |
province.put("sx", sxList); | |
province.put("gd", gdList); | |
String name = request.getParameter("name"); | |
List<String> citys = province.get(name); | |
response.setContentType("text/json;charset=utf-8"); | |
Gson gson = new Gson(); | |
String json = gson.toJson(citys); | |
PrintWriter out = response.getWriter(); | |
out.print(json); | |
out.flush(); | |
out.close(); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
<html> | |
<head> | |
<title>My JSP 'index.jsp' starting page</title> | |
<script type="text/javascript" src="js/json.js"></script> | |
</head> | |
<body> | |
<select id="province"> | |
<option value="">-- 请选择省份 --</option> | |
<option value="hn">河南</option> | |
<option value="sx">陕西</option> | |
<option value="gd">广东</option> | |
</select> | |
<select id="city"> | |
<option value="">-- 请选择城市 --</option> | |
</select> | |
<script type="text/javascript"> | |
var xmlHttp ; | |
function createXmlHttp() { | |
if(window.ActiveXObject) { | |
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); | |
}else { | |
xmlHttp = new XMLHttpRequest(); | |
} | |
} | |
document.getElementById("province").onchange = function() { | |
createXmlHttp(); | |
var name = document.getElementById("province").value; | |
if(name != "") { | |
xmlHttp.open("post", "ajax.jspx", true); | |
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded" ); | |
xmlHttp.onreadystatechange = callback; | |
xmlHttp.send("name=" + name); | |
}; | |
}; | |
function callback() { | |
if(xmlHttp.readyState == 4) { | |
if(xmlHttp.status == 200) { | |
var json = JSON.parse(xmlHttp.responseText); | |
document.getElementById("city").options.length = 1; | |
for(var i=0; i < json.length; i++) { | |
var city = json[i]; | |
var option = new Option(city,city); | |
document.getElementById("city").options.add(option); | |
}; | |
}else { | |
alert("Ajax Error : " + xmlHttp.status); | |
}; | |
}else { | |
}; | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment