Ajax案例之三级联动

最新推荐文章于 2021-12-31 16:58:27 发布

fachew

最新推荐文章于 2021-12-31 16:58:27 发布

阅读量592

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/fachew/article/details/97642158

版权

笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了使用Ajax、Servlet和JSP实现三级联动的过程。首先分析功能需求和技术方案，包括页面设计、Ajax请求和数据库设计。接着详细展示了V层、C层和M层的代码实现，包括js代码、Servlet处理和数据库操作。最后提出了代码改进措施，通过封装getData方法减少重复代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、思路

1.功能需求：
页面中有三个下拉框，分别为省下拉框、市下拉框、区/县下拉框。
选择省，则市下拉框中出现对应的该省下的市信息，
选择市，则区/县下拉框中出现对应的该市下的区/县信息
2.技术分析：
ajax技术+servlet+jsp+jdbc
3.需求分析（思路）：
1）创建页面：页面中有三个下拉框，分别为省/市/区、县；
2）页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省所在的下拉框；
3）选择省，触发一个新的js函数执行，该函数发起新的ajax请求，请求该省的市信息，并将响应结果填充到市所在的下拉框；
4）选择市信息触发一个新的js函数执行，该函数发起新的ajax请求，请求该省该市的区/县信息，并将响应结果填充到区/县所在的下拉框；
4.数据库设计：
创建表（area）：存储省市区县信息
1）设计表实现一：只存储了数据，但是数据之间的层级关系没有存储
地区id：areaid
地区名：areaname
2）设计表实现二：
地区id：areaid
地区名：areaname
地区上级id：parentid
5.sql语句设计：
查询所有的省信息：
select * from area where parentid=0；
查询选择的省的市信息：（假设查询的省的areaid=1000）
select * from area where parentid=1000；
查询选择的市的区/县信息：（假设查询的市的areaid=1001）
select * from area where parentid=10001；
代码中:
select * from area where parentid=?；
数据库实现：
将资料中的area.sql文件导入到数据库中即可

二、代码实现

1.V层：
select.jsp
首先，导入jquery文件
注：这里遇到一个bug，错误提示为Allocate exception for servlet，最后原因是我在这个项目已经导入了一个jquery文件的jar包，导致重复了；
另一种可能性是，服务器找不到对于的servlet，就去web.xml下面找找原因啦。
详情可看：添加链接描述

<!-- 引入jquery文件 -->
    <script type="text/javascript" src="js/j.js"></script>

添加js代码域，添加onchange事件

<!-- 声明js代码域 -->
	<script type="text/javascript">
			//页面加载成功请求省的信息
 	$(function(){
 		//发起ajax请求，请求所有的省信息
		getData(0,"pre");
 		//页面加载成功给省下拉框添加onchange事件
 			$("#pre").change(function(){
 				//获取当前选择的省的areaid
 				var areaid=$("#pre").val();
 				getData(areaid,"city");
 			});
 		//页面加载成功给市下拉框添加onchange事件
 			$("#city").change(function(){
 				//获取当前选择的市的areaid
 				var areaid=$("#city").val();
 				getData(areaid,"town")
 			})
 	})
	
		//封装公共方法
		function getData(areaid,sid){
			//发起ajax请求，请求当前省的市信息
			$.get("area",{parentid:areaid},function(data){
				//使用eval方法将数据转换为js对象
				eval("var areas="+data);
				//获取下拉框对象
				var sel=$("#"+sid);
				//清空原有内容
				sel.empty();
				//遍历
				for(var i=0;i<areas.length;i++){
					sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
				}
				//触发省下拉框的change事件
				$("#"+sid).trigger("change");
			})
		}

body

<body>
   <div style="margin: auto;width: 750px;margin-top: 200px;">
		 省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
	 	 市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
	 	 区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
	</div>	
  </body>

2、C层
AreaServlet

package com.facai.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.facai.pojo.Area;
import com.facai.service.AreaService;
import com.facai.service.impl.AreaServiceImpl;
import com.google.gson.Gson;

public class AreaServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("utf-8");
		//设置响应编码格式
		resp.setContentType("text/html;charset=utf-8");
		//获取请求信息
		String pid=req.getParameter("parentid");
		//处理请求
			//获取业务层对象
			AreaService as=new AreaServiceImpl();
			List<Area> la=as.getAreaInfoService(pid);
		//响应处理结果
			//直接响应
			resp.getWriter().write(new Gson().toJson(la));
	}
}

3.M层
业务层：
AreaService接口

package com.facai.service;

import java.util.List;

import com.facai.pojo.Area;

public interface AreaService {
	//根据pid查询地区信息
	List<Area> getAreaInfoService(String pid);

}

AreaServiceImpl.class

package com.facai.service.impl;

import java.util.List;

import com.facai.dao.AreaDao;
import com.facai.dao.impl.AreaDaoImpl;
import com.facai.pojo.Area;
import com.facai.service.AreaService;

public class AreaServiceImpl implements AreaService {
	//创建Dao层对象
	AreaDao ad=new AreaDaoImpl();
	//根据pid查询地区信息
	@Override
	public List<Area> getAreaInfoService(String pid) {
		
		return ad.getAreaInfoDao(pid);
	}

}

Dao层：
AreaDao接口

package com.facai.dao;

import java.util.List;

import com.facai.pojo.Area;

public interface AreaDao {
	//根据pid查询地区信息
	List<Area> getAreaInfoDao(String pid);
}

AreaDaoImpl.class

package com.facai.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.facai.dao.AreaDao;
import com.facai.pojo.Area;
import com.facai.util.DBUtil;


public class AreaDaoImpl implements AreaDao{
	//根据pid查询地区信息
	@Override
	public List<Area> getAreaInfoDao(String pid) {
		//声明jdbc变量
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		//声明变量
		ArrayList<Area> la=null;
		try {
			//获取连接
			conn=DBUtil.getConnection();
			//创建SQL命令
			String sql="select * from area where parentid=?";
			//创建SQL命名对象
			ps=conn.prepareStatement(sql);
			//给占位符赋值
			ps.setString(1,pid);
			//执行sql
			rs=ps.executeQuery();
			la=new ArrayList<>();
			//遍历结果
			while (rs.next()) {
				//创建实体类对象
				Area a=new Area();
				a.setAreaid(rs.getInt("areaid"));
				a.setAreaname(rs.getString("areaname"));
				a.setParentid(rs.getInt("parentid"));
				a.setArealevel(rs.getInt("arealevel"));
				a.setStatus(rs.getInt("status"));
				
				la.add(a);
			}
			//关闭资源
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DBUtil.closeAll(rs, ps, conn);
		}
		
		//返回
		return la;
	}

}

注：ArrayList la 要再try模块里面再new一次不然会出现空指针。

三、代码改进

js的代码域中有很多重复，所以封装成getData方法，根据参数parentid/div返回对应内容
改进后的select2.js

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'select2.jsp' starting page</title>
    <!-- 导入jquery文件 -->
   <script type="text/javascript" src="js/j.js"></script>
	<!-- 声明js代码域 -->
	<script type="text/javascript">
			//页面加载成功请求省的信息
 	$(function(){
 		//发起ajax请求，请求所有的省信息
		getData(0,"pre");
 		//页面加载成功给省下拉框添加onchange事件
 			$("#pre").change(function(){
 				//获取当前选择的省的areaid
 				var areaid=$("#pre").val();
 				getData(areaid,"city");
 			});
 		//页面加载成功给市下拉框添加onchange事件
 			$("#city").change(function(){
 				//获取当前选择的市的areaid
 				var areaid=$("#city").val();
 				getData(areaid,"town")
 			})
 	})
	
		//封装公共方法
		function getData(areaid,sid){
			//发起ajax请求，请求当前省的市信息
			$.get("area",{parentid:areaid},function(data){
				//使用eval方法将数据转换为js对象
				eval("var areas="+data);
				//获取下拉框对象
				var sel=$("#"+sid);
				//清空原有内容
				sel.empty();
				//遍历
				for(var i=0;i<areas.length;i++){
					sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
				}
				//触发省下拉框的change事件
				$("#"+sid).trigger("change");
			})
		}
		
		
	</script>
  </head>
  
  <body>
   <div style="margin: auto;width: 750px;margin-top: 200px;">
		 省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
	 	 市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
	 	 区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
	</div>	
  </body>
</html>