jquery ajax 实现动态联动查询

最新推荐文章于 2023-11-17 15:10:30 发布

晏如也

最新推荐文章于 2023-11-17 15:10:30 发布

阅读量9.1k

点赞数 2

文章标签： jquery ajax

本文链接：https://blog.csdn.net/sinat_24491773/article/details/50810471

版权

一、相关工具

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>

好的，成果如下。