怎么在一个表中实现Java的三级联动 jsp三级联动

转载

mob6454cc6aeeaf 2023-08-28 19:56:12

文章标签 怎么在一个表中实现Java的三级联动 jsp 二级联动下拉表单框数据回显 js三级联动下拉框 layui三级联动默认不选下拉多选择框实现方式 文章分类 Java 后端开发

怎么在一个表中实现Java的三级联动 jsp三级联动_怎么在一个表中实现Java的三级联动

一、ajax三级联动省、市、区/县选择框

1.功能需求：

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

选择省，则市选择框出现该省下的市信息

选择市，则区/县下拉框中出现该市对应的区/县信息。

2.技术分析：

ajax技术+servlet+jsp+jdbc

3.思路分析：

1、创建页面：页面中有三个下拉框

2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中。

3、选择省触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该省下的市信息，并将响应数据填充到市下拉框中。

4、选择市信息，触发一个新的js函数的执行。该函数中发起新的ajax请求。

请求该市下的区/县信息，并将数据填充到区/县下拉框中。

4.数据库设计：

创建表（area）：存储了省、市、区/县信息。

设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。

地区id：areaid

地区名: areaname

设计表实现二：

地区id：areaid

地区名: areaname

地区上级id:parentid

5. sql语句设计：

查询所有的省信息：

select * from area where parentid=0;

查询选择的省的市信息（假如：选择的省的areaid为110000）

select * from area where parentid=110000;

查询选择的市的区/县信息（假如：选择的市的areaid为110001）

select * from area where parentid=110001;

代码中：select * form area where parentid=?;

数据库实现：将资料中area.sql文件导入数据库中即可。

功能实现：参照源码

6. 代码缺陷：

发现请求省，市，县的代码中基本上是一致的，代码的冗余量有点大。

解决：考虑使用封装。

实现：相同的保留，不同的传参。

7. 源码

1、select2.jsp

<%@ 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>

<title>My JSP 'select.jsp' starting page</title>

//页面加载成功请求省的信息

$(function(){

getData(0,"pre");

$("#pre").change(function(){

var areaid=$("#pre").val();

getData(areaid,"city");

})

$("#city").change(function(){

var areaid=$("#city").val();

getData(areaid,"county");

})

//封装公共方法

function getData(areaid,sid){

//页面加载成功，给省下拉框加载onchange事件

//发起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>

省：<select name="" id="pre" style="width:200px;height:30px"></select>

市：<select name="" id="city" style="width:200px;height:30px"></select>

区/县：<select name="" id="county" style="width:200px;height:30px"></select>

</div>

</body>

</html>

2、AreaServlet代码

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、AreaDaoImpl实现类处理主要数据层逻辑

public class AreaDaoImpl implements AreaDao{

/**

* 根据pid获取地区信息

@Override

public List<Area> getAreaInfoDao(String pid) {

List<Area> la = null;

Connection conn = null;

PreparedStatement ps = null;

ResultSet rs = null;

try {

conn=DBUtil.getConnection();

String sql="select * from area where parentid=?";

ps=conn.prepareStatement(sql);

ps.setString(1, pid);

rs = ps.executeQuery();

la=new ArrayList<>();

while(rs.next()){

Area area=new Area();

area.setAreaid(rs.getInt("areaid"));

area.setAreaname(rs.getString("areaname"));

area.setArealevel(rs.getInt("arealevel"));

area.setParentid(rs.getInt("parentid"));

area.setStatus(rs.getInt("status"));

la.add(area);

}

} catch (Exception e) {

e.printStackTrace();

}finally{

DBUtil.closeAll(rs, ps, conn);

}

return la;

}

二、搜索框提示语项目

ajax之搜索框关键字提示语：

1.功能需求：

用户在搜索框中输入关键字，然后搜索框出现下拉选项，提示关键字的提示语。

用户可以用鼠标进行提示语的选择，也可以使用键盘上的上下键来进行选择。

2.技术分析：

ajax+servlet+jsp+jdbc

3.功能分析（思路）：

1、创建搜索界面。搜索框和搜索按钮和提示语div。

2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求，请求当前用户输入的信息对应的提示语数据。

3、将提示语填充到搜索框下的div中。

问题：

现在用户在搜索框上单击任意一个键都会发起ajax请求，请求提示语。

解决：

判断用户单击的键盘的按键，符合要求再发请求。

解决：

获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取。

4、实现使用鼠标选择提示语

5、实现键盘的上下键选择提示语

6、实现鼠标和键盘的联动操作

7、将现实提示语的div进行隐藏，当有提示语的时候显示隐藏的div。

4.完善：

问题1：只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。

而只要数据符合要求，都会发生ajax请求，请求提示语信息。点击一次都会发一次，

其实只需要最后一次进行请求发送即可。

解决1：使用延迟发送请求

使用：window.setTimeOut

问题2：event对象在火狐浏览器中使用window.event获取不到。

解决2：在火狐浏览器中使用传参的方式给event进行赋值

使用：参照源码即可。

5.数据库设计：

创建表：（data）存储了常用的关键字数据。

关键字编号：id

关键字数据：title

说明：remark

添加测试数据：要求前期测试数据为英文单词

SQL语句设计：查询以用户当前搜索框数据开头的关键字

select * from data where title like concat(?,'%')

注意：提示语句不要过多。

6.数据库实现：在数据库中创建表即可，并添加测试数据。

1、search.jsp源码

<%@ 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 'search.jsp' starting page</title>
<script type="text/javascript" src="js/j.js"></script>
 <!-- 声明js代码域 -->
 <script type="text/javascript">
 //创建计数器
 var count=-1;
 //声明变量记录定时执行的编号
 var id;
 //页面加载成功后完成页面资源的初始化
 $(function(){
 //给搜索框添加键盘弹起事件
 $("#search").keyup(function(event){ //火狐方式获取event对象
 //声明正则表达式判断空格
 var reg=/^s+$/g;
 //获取event对象
 var eve=window.event||event
 //获取用户当前点击的键盘的键盘值
 var code=eve.keyCode;
 //判断code的值是否符合要求 是字母或者退格键
 if(code>=65&&code<=90||code==8||code==32){
 //将计数器置为初始值
 count=-1;
 //获取当前用户搜索框的数据
 var sd=$("#search").val();
 //如果搜索框的数据为空，则不发请求，直接返回
 if(sd==""||reg.test(sd)){
 $("#dataDiv").css("display","none");
 return;
 }
 //清除之前未执行的请求id
 window.clearTimeout(id);
 //如果满足请求，先等1秒在发送ajax请求，节省资源。
 id=window.setTimeout(function(){
 //发起ajax请求，请求当前用户搜索框数据的提示语信息。
 $.get("search",{sdata:sd},function(data){
 //使用eval方法将数据转换为对象
 eval（"var sd="+data);
 //获取提示语div元素对象
 var dataDiv=$("#dataDiv");
 //清空原有内容
 dataDiv.empty();
 if(sd.length>0){
 //显示隐藏的div
 dataDiv.css("display","");
 }
 //将提示语数据填充到div中
 for(var i=0;i<sd.length;i++){
 dataDiv.append("<div style='height:25px;font-size:18px;'>"+sd[i].title+"</div>");
 }
 //给所有提示语div添加鼠标放上事件
 $("#dataDiv div").mouseover(function(){
 //清空所有提示语div的格式
 $("#dataDiv div").css("color","");
 $("#dataDiv div").css("background-color","");
 //将当前选择的div的背景颜色设置为灰色
 $(this).css("color","blue");
 $(this).css("background-color","gray");
 //实现鼠标与键盘的联动
 count=$(this).index();
 })
 //给提示语div添加单击事件
 $("#dataDiv div").click(function(){
 //将当前选择的提示语div中的内容赋值给搜索框
 $("#search").val($(this).html());
 //隐藏所有当前提示语div
 $("#dataDiv").css("display","none");
 })
 })
 }, 500);
 }
 //判断用户点击的是否是键盘的下键
 if(code==40){
 //判断是否有提示语
 if($("#dataDiv div").length>0){
 count=count<$("#dataDiv div").length-1?++count:0;
 //清空原有选中格式
 $("#dataDiv div").css("color","");
 $("#dataDiv div").css("background-color","");
 //让提示语中的第一个div变为选中格式
 $("#dataDiv div:eq("+count+")").css("color","blue");
 $("#dataDiv div:eq("+count+")").css("background-color","gray");
 }
 }
 //判断用户点击的是否是上键
 if(code==38){
 //判断是否有提示语
 if($("#dataDiv div").length>0){
 count=count>0?--count:$("#dataDiv div").length-1;
 //清空原有选中格式
 $("#dataDiv div").css("color","");
 $("#dataDiv div").css("background-color","");
 //让提示语中的第一个div变为选中格式
 $("#dataDiv div:eq("+count+")").css("color","blue");
 $("#dataDiv div:eq("+count+")").css("background-color","gray");
 }
 }
 })
 })
 </script>
 </head>
 <body>
 <!-- 创建div进行搜索框的布局 -->
 <div id="container" style="width:550px;margin:auto">
 <div id="sdiv" style="width:550px;margin:auto;margin-top:200px">
 <input type="text" name="search" id="search" value="" style="width:400px;height:30px;font-size:18px;"/>
 <input type="button" value="搜索" style="width:100px;height:30px"/>
 </div>
 <div id="dataDiv" style="width:398px;height:300px;border:solid 1px gray;border-top:none;display:none;"></div>
 </div>
 </body>
</html>

2、SearchServlet代码

public class SearchServlet 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 sdata = req.getParameter("sdata");
 //处理请求数据
 //获取业务层对象
 SearchService ss = new SearchServiceImpl();
 //调用方法获取提示语数据
 List<Data> ld = ss.getSearchInfoService(sdata);
 //响应请求数据
 //直接响应
 resp.getWriter().write(new Gson().toJson(ld));
 }
}
3、SearchDaoImpl代码--该实现类处理主要的数据库操作逻辑
public class SearchDaoImpl implements SearchDao{
 //根据用户搜索框数据获取提示语信息
 @Override
 public List<Data> getSearchInfoDao(String sdata) {
 //声明jdbc变量
 Connection conn=null;
 PreparedStatement ps = null;
 ResultSet rs = null;
 //声明变量
 List<Data> ld = null;
 try {
 //获取连接
 conn=DBUtil.getConnection();
 //创建SQL命令
 String sql = "select * from t_data where title like concat(?,'%')";
 //创建SQL命令对象
 ps=conn.prepareStatement(sql);
 //给占位符赋值
 ps.setString(1, sdata);
 //执行查询
 rs=ps.executeQuery();
 ld=new ArrayList<>();
 //遍历
 while(rs.next()){
 Data data=new Data();
 data.setId(rs.getInt("id"));
 data.setTitle(rs.getString("title"));
 data.setRemark(rs.getString("remark"));
 ld.add(data);
 }
 } catch (Exception e) {
 e.printStackTrace();
 }finally{
 //关闭资源
 DBUtil.closeAll(rs, ps, conn);
 }
 //返回
 return ld;
 }

}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。