servlet
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CityServlet() {
super();
// TODO Auto-generated constructor stub
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String country = request.getParameter("country");
String dataType = request.getParameter("dataType");
String sendType = request.getMethod();
if (!"post".equals(sendType)) {
country = new String(request.getParameter("country").getBytes("ISO-8859-1"), "utf-8");
}
StringBuffer sb = new StringBuffer("");
if (!"json".equals(dataType)) {
sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");
if ("中国".equals(country)) {
sb.append("<city>北京</city>").append("<city>上海</city>").append("<city>广州</city>").append("<city>深圳</city>");
} else if ("美国".equals(country)) {
sb.append("<city>华盛顿特区</city>").append("<city>纽约</city>").append("<city>洛杉矶</city>").append("<city>芝加哥</city>");
}
sb.append("</root>");
response.setContentType("text/xml;charset=utf-8");
} else {
sb.append("{");
sb.append("\"cities\":[");
if ("中国".equals(country)) {
sb.append("{\"city\":\"北京\"},{\"city\":\"上海\"},{\"city\":\"广州\"},{\"city\":\"深圳\"}");
} else if ("美国".equals(country)) {
sb.append("{\"city\":\"华盛顿特区\"},{\"city\":\"纽约\"},{\"city\":\"洛杉矶\"},{\"city\":\"芝加哥\"}");
}
sb.append("]}");
response.setContentType("text/html;charset=utf-8");
}
PrintWriter out = response.getWriter();
out.println(sb.toString());
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
ajax_jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country = $(this).val();//获取选中的值
var dataType = "json"; //请求的数据格式
if(country != undefined && country != null){
//根据国家获取该国的城市列表 并设置到城市下拉框中
$.ajax({
url:"${pageContext.request.contextPath}/CityServlet",
data:{"country":country,"dataType":dataType},//这里的dataType是为了让Servlet获取的
type:"get",
dataType:dataType,
success:function(data){
if("json" == dataType){
if(data != undefined && data != null){
//将城市列表设置到城市下拉框中
var cities = data.cities;
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each(cities, function(i, obj){
$citySelect.append("<option>"+ obj.city +"</option>");
});
} else { alert("操作失败。");}
} else {//解析xml的文本内容
var $xmlDocument = $(data);
var $cities = $xmlDocument.find("city");
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each($cities, function(i, obj){//遍历所有的城市列表
//设置城市下拉框中的选项
$citySelect.append("<option>"+ $(obj).text() +"</option>");
});
}
}
});
} else {
alert("请选择国家！");
}
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<div style="width:100%;text-align: center;margin-top: 30px;">
国家：<select id="country" style="width:160px;">
<option>请选择</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
</select>
---
城市：<select id="city"></select>
</div>
</body>
</html>
ajax_get/post
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country = $(this).val();//获取选中的值
var dataType = "json"; //请求的数据格式
if(country != undefined && country != null){
//根据国家获取该国的城市列表 并设置到城市下拉框中
$.get( //post
"${pageContext.request.contextPath}/CityServlet",
{"country":country,"dataType":dataType},//这里的dataType是为了让Servlet获取的
function(data){
if("json" == dataType){
if(data != undefined && data != null){
//将城市列表设置到城市下拉框中
var cities = data.cities;
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each(cities, function(i, obj){
$citySelect.append("<option>"+ obj.city +"</option>");
});
} else { alert("操作失败。");}
} else {//解析xml的文本内容
var $xmlDocument = $(data);
var $cities = $xmlDocument.find("city");
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each($cities, function(i, obj){//遍历所有的城市列表
//设置城市下拉框中的选项
$citySelect.append("<option>"+ $(obj).text() +"</option>");
});
}
},
dataType//顺序不能乱哦!
);
} else {
alert("请选择国家！");
}
});
});
</script>
getJSON
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country = $(this).val();//获取选中的值
var dataType = "json"; //请求的数据格式
if(country != undefined && country != null){
//根据国家获取该国的城市列表 并设置到城市下拉框中
$.getJSON( //post
"${pageContext.request.contextPath}/CityServlet",
{"country":country,"dataType":dataType},//这里的dataType是为了让Servlet获取的
function(data){
if("json" == dataType){
if(data != undefined && data != null){
//将城市列表设置到城市下拉框中
var cities = data.cities;
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each(cities, function(i, obj){
$citySelect.append("<option>"+ obj.city +"</option>");
});
} else { alert("操作失败。");}
} else {//解析xml的文本内容
var $xmlDocument = $(data);
var $cities = $xmlDocument.find("city");
//清空城市列表
var $citySelect = $("#city");
$citySelect.empty();
$.each($cities, function(i, obj){//遍历所有的城市列表
//设置城市下拉框中的选项
$citySelect.append("<option>"+ $(obj).text() +"</option>");
});
}
}
);
} else {
alert("请选择国家！");
}
});
});
</script>
