jsp 二级联动下拉表单框数据回显_057 ajax三级联动和搜索框提示语项目

最新推荐文章于 2022-07-25 19:05:03 发布
最新推荐文章于 2022-07-25 19:05:03 发布
阅读量305 收藏
点赞数
文章标签： jsp 二级联动下拉表单框数据回显 js三级联动下拉框 layui三级联动 默认不选 下拉多选择框 实现方式 下拉选择框 其他 模态框导致select下拉事件重复执行

a1a2726763541c7a2e58c4487b9b7358.png

一、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>

<base href="<%=basePath%>">

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

<!-- 引入jquery文件 -->

<script type="text/javascript" src="js/j.js"></script>

<script>

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

$(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>

<body style="background-image:url(images/wlt.jpg);background-size:1550px 750px">

<div style="margin:auto;width:750px;margin-top:200px;color:white">

省：<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;

}

}

weixin_39524703
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax+mysql+jsp省市区三级联动显示
04-14
ajax+mysql+jsp省市区三级联动显示
省市级三级联动js脚本，数据回显整合代码
03-08
省市级三级联动js脚本，数据回显整合代码
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决layui 三级联动下拉框更新时回显的问题
10-16
今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于layui的下拉列表的数据回显方法
10-16
今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
01-20
本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法。分享给大家供大家参考，具体如下： 项目告一段落，现在将遇到的比较实用的东西记录下来，写了多遍了，谨记于此，以备查看！ 1、首先在数据库中获取第一个下拉框的数据： <s:select listKey=tsFrom id=t_tsfrom cssClass=required listValue=tsFrom cssStyle=width:90 list=tsfrom1 name=tsFrom theme=simple headerKey= onchange=getTsFromDescrib
ajax jsp二级联动下拉框 select框
热门推荐
wenpengy的专栏
02-23 1万+
//==================>【index.jsp】=============================== mmlist = (List)request.getAttribute("mmList"); if(mmlist==null){   mmlist=new ArrayList(); } %> mclist = (List)request.get
JSP页面表单联动，最新~~~
ghb5371548的专栏
10-22 296
在接受到action的请求后，在后台首先查出连个集合，比如 所有的部门，所有的人员 List users = userInfoFacede.getAllUsers(); request.setAttribute("users", users); //把值传给表单 List dept = userInfoFacede.getAllDeptName();...
ajax jsp中二级下拉框联动 固定数据
u010098770的专栏
08-15 942
在index.jsp中的代码如下。             二级菜单联动演示             var req;     window.onload=function()     {//页面加载时的函数     }        function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数       var provinc
jsp页面数据回显（select下拉选择框）
weixin_33807284的博客
11-25 2363
1。静态变量方式： &lt;!-- 实现select标签回显 --&gt; 1.&lt;select name="curStatus" value="${curStatus}"&gt; &lt;option value="0"&gt;-请选择-&lt;/option&gt; &lt;option value="1"
浅谈JSP表单中下拉列表的实现
12-18
资源讲述的是jsp的表单中的下拉列表的实现
在jsp中如何用下拉菜单实现动态查询
09-24
form method="post" action=""> 查询用户 全部 用户ID 用户名 <input type="text" name="username" size="18"/></td> <<input type="submit" name="chaxun"/></td> <% if(db.connect()) { String sql="select * from users"; if(request.getParameter("chaxun")!=null) { if(!request.getParameter("select").equals("all"))
纯 CSS 实现搜索框的展示与隐藏
broken_promise的博客
07-25 1751
设置搜索图标.这里多说一嘴,其实这个搜索图标用按钮实现也行,因为按钮会水平垂直居中咱们的🔍图标.但是不好的地方是要通过。选中时展示输入框.结构如下,注意标签的顺序因为会使用到。处于选中状态时,要将输入框显示出来,但是要注意加上。好久没有更新这个动效了,因为自己没有灵感😶…首先是全局样式.元素水平居中,背景色为水平渐变。主要思路就是默认隐藏输入框,然后通过。接下来,设置容器为相对布局,并隐藏。浏览器),因此要上下边距为。📕默认实现隐藏的方法就是设置。的大小相同,但因为。...
在一个jsp页面实现二级下拉框联动，实时读取数据库数据（用javascript实现）
塞翁失马
04-29 2753
在一个jsp页面实现二级下拉框联动，实时读取数据库数据，这个方法非常使用，只需要修改很小的地方就可以使用。设计的文件，serch.jsp，main.js，bytetostr.js，先讲一下main.js，这是javascript，其中注意修改jsp页面名称。  function findObject(fName,initValue)...{   var xmlhttp = new
JSP基础语句总结
醉死梦红尘的博客
08-17 307
EL表达式 作用 代码 语法 ${表达式} 忽略表达式 ${表达式} 空运算符 empty 用于判断字符串、集合、数组对象是否为null并且长度为0 ${empty 键名} 获取值 代码 作用 域名称.setAttribute(“名称”,“内容”) 在域中存储数据; 1.${域名称.键名} 从指定域中获取指定键的值 （找不到显示空字符串） 域名称： pageScope --> 从 pagecontext 中获取值 当前页面 requ
实现jsp页面二级下拉框联动，实时读取数据库数据
zgqtxwd的专栏
05-01 745
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
java 多级级联菜单回显_java jsp js 实现地区表 三级联动，并修改时数据回显
weixin_36136552的博客
02-16 352
js:方法//下一级function areaNext(id){if($("#area"+id).val() == 0){document.getElementById("area1"+id).options[0].selected=true;document.getElementById("area2"+id).options[0].selected=true;document.getEleme...
JSP+JDBC+AJAX 进行二级联动下拉菜单的动态数据绑定
jingchao1998的博客
07-28 3249
今天做了个小例子，用来通过异步来实现一个二级菜单中的数据从数据库中获取并绑定，它将数据库中的数据查询出来后添加到map对象中，通过json包将其打为json字符串返回给前台。有不足的地方请建议(#^.^#) 用到的资源有： jquery-3.3.1.min.js gson-2.2.4.jar mysql-connector-java-8.0.11.jar 因为用到了数据库，就先看一下...
vue+ts+elementplus实现省市区三级联动数据回显
最新发布
09-07
对于Vue+TypeScript和Element Plus的三级联动数据回显，可以按照以下步骤进行实现： 1. 首先，在Vue组件中定义省市区的数据源，可以使用数组或者对象的形式存储。例如： ```typescript data() { return { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值