一、相关工具
jquery 相关脚本文件，
gson 工具包（这个主要是对 json 的操作，任意工具都可以）
eclipse （创建 javaweb 项目）
tomcat 7.0
二、准备工作
首先，我们先建立一个 javaweb 项目，姑且命名为 AjaxTest 。
然后在 WebContent （有时候也叫 WebRoot）目录下建立一个名为 js 的文件夹，当然名字随便啦，主要放一些 javascript 文件。
把 jquery 文件放到 js 文件夹。（我这里的版本是
jquery-1.12.1，这个可以到 jquery 相关网站轻易下载
）
把 gson jar 包放到 WEB-INFO 的 lib 文件夹下，别忘了 右键 jar 包 build path ----> add to build path .
下一步我们就可以开始码 jsp 界面
三、jsp 界面
这里为了方便我们就不把 jsp 文件建立到 WEB-INFO 目录下，我们直接把它建立到 WebContent 下，赐其名曰：ajax_test.jsp
好了，这个时候我们来看一下，现在的工程目录结构如下：
下面，我们来编写 ajax_test.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">
<title>AJAX TEST</title>
<style type="text/css">
</style>
</head>
<body>
<form action="" method="post">
<select id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<select id="zone">
<option value="1">朝阳</option>
<option value="1">海淀</option>
<option value="1">石景山</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
运行后是这样，
为了方便观察，我在这里指定了两个初值。现在点击提交按钮是没有用的，form 表单的 action 还没有指定路径。
四、jquery 实现组件事件的监听
现在，我们想实现改变第一个选择框的值后，第二个选择框的内容发生改变。
OK，熟悉 jquery 的朋友应该都很清楚 jquery 的语法结构，如下：
$(selector).action();
其中，
$ ------- 是 jquery 的指定符
selector ------- 选择器，指定你要操作的组件
action() ------- 操作组件的行为，一般有：hide，show，click 等
好了，这里我们只要使用如下语句，
$("#city").change(function(){
// 这里是方法的实现
alert("city selectBox change !");
});
现在，我们把这行语句加入 jsp 文件，看看会发生什么！（head 部分代码如下：）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX TEST</title>
<script type="text/javascript" src="js/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){ // 文档就绪事件
$("#city").change(function(){
// 这里是方法的实现
alert("city selectBox change !");
});
});
</script>
</head>
当我们改变选择框的值时，就会弹出提示框，如下：
五、jquery ajax实现异步加载
好了，我想你已经迫不及待的想看下面的内容了。好的，Let's go !
ajax 的使用语法：
$.ajax({
url: 链接地址,
dataType: 数据类型,
success: function(){} 执行成功后的回调方法
});
首先第一个，链接地址是什么？
链接地址
可以是文件，也可以是请求，本例中，它当然是一个请求，
问题又来了，给谁的请求呢？ 当然是 servlet
Ok，接下来我们就开始写一个 servlet。
我们工程目录的 java resource --> src 下建立一个名字叫 servlet 的包（包名习惯上小写），用来存放我们编写的 servlet 类。
然后，新建一个servlet 类，我们可以在 eclipse 中右键 New --> Servlet，名字就叫它 SearchZoneServlet.java （习惯上 servlet 类都以 Servlet命名结
尾），这里我把指定的 MapUrlpattern 设为了 /SerachZone
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SearchZoneServlet
*/
@WebServlet("/SearchZone")
public class SearchZoneServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
<span style="white-space:pre"> </span>public SearchZoneServlet() {
<span style="white-space:pre"> </span> <span style="white-space:pre"> </span> super();
<span style="white-space:pre"> </span>}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
searchZone();
}
/**
* 查询指定城市的区县
*/
private void searchZone() {
System.out.println("Servlet 正在处理...");
}
}
把 ajax 执行语句加入监听事件中，
$.ajax({
url: "SearchZone",
});
jsp 的 head 部分代码如下，
开启tomcat ，在浏览器中输入
http://localhost:8080/AjaxTest/ajax_test.jsp，改变 city 选择框内的选择，查看 eclipse 控制条是否输出指定内容。如下，
如果出现 404 错误，尝试重启一下 tomcat，如果还出错，就手动配置一下 web.xml 文件中关于 servlet 的部分。
现在改变一下我们 ajax 的 url ，把选择城市的 value 加进去，如下
<script type="text/javascript">
$(function(){
$("#city").change(function(){
// 这里是方法的实现
$.ajax({
url:"SearchZone?cityId=" + $("#city").val(), //这里注意不要加分号，因为 ajax 是以逗号分隔
});
});
});
</script>
在
SearchZoneServlet.java 的 searchZone() 方法中加入
String
id
=
request
.getParameter(
"cityId"
);
System.out.println(id);
在我们，改变城市的选择时，就会打印出对应的城市 id ，
![]()
![]()
![]()
然后，我们再新建一个 Zone.java 的实体类，用来 json 的转化。
searchZone() 方法的代码如下，
/**
* 查询指定城市的区县
*/
private void searchZone(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("cityId");
Gson gson = new Gson();
StringBuffer json = new StringBuffer();
switch (id) {
case "1":
json.append("[");
Zone zone = new Zone("1", "朝阳");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("2", "海淀");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("3", "石景山");
json.append(gson.toJson(zone, Zone.class).toString());
json.append("]");
break;
case "2":
json.append("[");
zone = new Zone("1", "徐汇");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("2", "闵行");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("3", "静安");
json.append(gson.toJson(zone, Zone.class).toString());
json.append("]");
break;
case "3":
json.append("[");
zone = new Zone("1", "天河");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("2", "越秀");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("3", "黄埔");
json.append(gson.toJson(zone, Zone.class).toString());
json.append("]");
break;
case "4":
json.append("[");
zone = new Zone("1", "福田");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("2", "罗湖");
json.append(gson.toJson(zone, Zone.class).toString() + ",");
zone = new Zone("3", "南山");
json.append(gson.toJson(zone, Zone.class).toString());
json.append("]");
break;
default:
break;
}
// 指定内容格式与编码方式
response.setContentType("test/javascript; charset=utf-8");
try {
//向jsp发送json对象
response.getWriter().print(json);
} catch (IOException e) {
e.printStackTrace();
}
}
ajax 的代码如下，
<script type="text/javascript">
$(function(){
$("#city").change(function(){
$("#zone").empty();
// 这里是方法的实现
$.ajax({
url:"SearchZone?cityId=" + $("#city").val(), //这里注意不要加分号，因为 ajax 是以逗号分隔
dataType:"json",
success:function(json){
for (var i = 0; i < json.length; i++) {
$("#zone").append("<option value="+ json[i].id +">"+json[i].name+"</option>");
}
}
});
});
});
</script>
好的，成果如下。
六、总结
其实，省市区的联动查询，在网上可以轻易地找到更好的工具类来实现，但无论如何，花了一堆时间来琢磨这个问题，也不能说没有什么收获。
自己做出来的时候，还是小小地激动了一下。好了，继续。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
