java,jsp页面添加提示图以及提示音乐

效果如下:
这里写图片描述

前台代码
<!-- 使用h5写的提醒图片-->
 <style>
.tx{ width:38px;height:30px;display:inline- block;background:url("../../../images/sos.gif") no-repeat;position:relative;top:5px;left:3px;<!-- 使用h5写的提醒图片-->
}
</style>   

  <!--下载的音乐 -->
 <a href="#" id="MsgNum"><i onclick="remind()"><i class="hasxx"></i></i></a>
 <audio autoplay="autoplay" loop="loop" id="remindSound"></audio><!--下载的音乐 -->
 <!--当进入时候就会执行方法-->
$(document).ready(function (){
    remindTasking();
 });
 <!--执行完以下代码之后为重点:添加提示图片以及音乐-->
function remindTasking(){
$.ajax({
    url: "/remind/remindList.html",
    type: "post",
    dataType:"json",
    cache: false,
    async: false,
    success: function(data){//请求成功之后
        if(data.length>0){//如果有数据                   
            $('#MsgNum').attr("title","你有"+data.length+"条未读消息");
            $('#recolor').attr("color","red");
            $("#remindSound").attr("src","../../../music/7821.mp3");//添加音乐
            $('#MsgNum .hasxx').addClass('tx');//添加显示的图片
        }else{  //如果没有数据
            $("#remindSound").attr("src","");//将音乐清空
            $('#recolor').attr("color","white");
            $('#MsgNum .hasxx').removeClass('tx');//将显示的提示图片去掉
        }
    }
 })
}

如果有数据此时会有图片音乐,如上图所示:
注: (1)后台代码我就不写了;
(2)添加音乐使用的标签:

(3)图片就不多说了;
希望对你有用

<think>我们正在解决用户的问题:JSP页面登录失败的原因及解决方案。根据引用[3]:用户描述了登录失败后,错误信息在刷新页面后依然存在的问题。这通常是因为在表单提交失败后,后端将错误信息存储在请求或会话中,而前端页面每次加载时都会显示这些错误信息,直到用户成功登录或错误信息被清除。可能的原因:1.错误信息存储在了session中,而没有被及时清除。2.页面在显示错误信息后,没有重置错误状态。解决方案:1.在成功显示错误信息后,应该从session中移除错误信息,这样刷新页面就不会再次显示。2.也可以考虑使用请求属性(requestattribute)而不是会话属性(sessionattribute)来传递错误信息,因为请求属性只在一次请求中有效,刷新页面(新的请求)就不会再显示。引用[3]中提到的问题就是错误信息存储在session中导致的。因此,我们可以在显示错误信息后立即从session中移除。具体步骤:后端(例如在Servlet中):-如果登录失败,将错误信息存入session:`session.setAttribute("error","用户名或密码错误");`-然后重定向到登录页面。前端(JSP页面):-使用JSTL或EL表达式显示错误信息:`<c:iftest="${notemptyerror}"><div>${error}</div></c:if>`-然后立即移除session中的错误信息:`<%session.removeAttribute("error");%>`但是注意:在JSP页面中直接使用脚本片段移除属性并不是最佳实践,因为JSP主要是用于展示。更好的做法是在展示错误信息后,由负责展示的Servlet(或控制器)在设置错误信息到请求属性后,在同一个请求周期内展示,然后错误信息自然消失(因为请求属性只在当前请求有效)。或者,如果使用session,则在展示后立即移除。然而,使用请求属性需要我们在登录失败时使用请求转发而不是重定向,因为重定向会丢失请求属性。但重定向可以避免表单重复提交,所以需要权衡。另一种方案:使用重定向,但将错误信息作为URL参数传递(不推荐,因为可能会暴露敏感信息,且不美观)。因此,常见的做法是:-登录失败时,使用请求转发(forward)到登录页面,并将错误信息放在request属性中。这样刷新页面时,因为刷新会重复最后一次请求(即转发过来的请求),所以错误信息会再次出现(但用户刷新页面时可能并不想再次提交表单,所以这样也会有问题)。所以,更推荐的做法是:使用重定向,并将错误信息存储在session中,然后在显示后立即从session中移除。示例代码:在登录处理的Servlet中(假设为LoginServlet):if(登录失败){session.setAttribute("error","登录失败,用户名或密码错误!");response.sendRedirect("login.jsp");}在login.jsp页面顶部:<%Stringerror=(String)session.getAttribute("error");if(error!=null){//显示错误信息out.println("<divclass='error'>"+error+"</div>");//移除session中的错误信息session.removeAttribute("error");}%>或者使用JSTL和EL(更推荐):<c:iftest="${notemptysessionScope.error}"><divclass="error">${sessionScope.error}</div><c:removevar="error"scope="session"/></c:if>注意:`<c:remove>`标签会从指定的scope中移除属性。这样,当用户刷新页面时,因为错误信息已经被移除,所以不会再显示。其他可能导致登录失败的原因及解决方案:1.数据库连接问题:检查数据库连接是否正常,用户名密码是否正确。2.输入验证:前端或后端验证未通过,例如用户名密码为空。3.密码加密问题:存储的密码是加密的,但登录时没有用同样的方式加密比较。4.会话管理问题:例如,在用户登录成功后,没有正确设置session属性,导致后续页面认为没有登录。5.路径问题:提交的URL是否正确,是否被安全拦截等。根据引用[2],还要注意JSP页面是否能够正确解析EL表达式,如果无法解析,错误信息可能无法显示。需要确保在pom.xml中引入了JSTL依赖,并且在JSP页面中正确引入了标签库。引用[2]中的依赖:<dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>javax.servlet.jsp.jstl-api</artifactId><version>1.2.2</version></dependency>并且在JSP页面头部添加:<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>另外,引用[1]提到JSP页面过大的问题,虽然登录页面一般不会太大,但也需要注意避免将大量Java代码写在JSP中,保持简洁。引用[4]提到了跨域问题,但登录一般不会跨域,除非前后端分离部署,此时需要设置跨域响应头。但这是另一个话题。综上所述,针对用户提到的刷新后错误信息依然存在的问题,我们给出了使用session存储错误信息并在显示后立即移除的解决方案。同时,也列出了其他可能导致登录失败的原因,供用户排查。下面我们按照要求生成相关问题。</think>### JSP页面登录失败的原因及解决方案 #### 一、常见原因分析 1. **会话管理问题** - 错误信息存储在`session`中未清除,导致刷新页面时重复显示(如引用[3]描述)[^3] - 会话超时或`session`未正确初始化 2. **数据验证失败** - 前端表单验证未通过(如空字段、格式错误) - 后端业务逻辑验证失败(如用户名/密码不匹配、账户锁定) 3. **EL表达式解析失败** - 缺少JSTL依赖(如引用[2]所述),导致`${errorMsg}`无法显示[^2] - 未在JSP头部声明标签库:`<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>` 4. **请求处理异常** - 表单提交方式`method="post"`与后端接收方式不一致 - 参数名不匹配(如前端`name="username"`,后端`request.getParameter("user")`) 5. **安全机制拦截** - CSRF令牌验证失败 - 防火墙或安全框架(如Spring Security)拦截请求 --- #### 二、解决方案 ##### 1. 修复会话残留问题(针对引用[3]) ```jsp <%-- 显示错误后立即清除session --%> <c:if test="${not empty sessionScope.errorMsg}"> <div class="alert">${sessionScope.errorMsg}</div> <% session.removeAttribute("errorMsg"); %> </c:if> ``` **原理**:使用`<c:remove>`或`session.removeAttribute()`在显示后立即清除错误信息[^3]。 ##### 2. 添加JSTL依赖(针对引用[2]) ```xml <!-- pom.xml 添加依赖 --> <dependency> <groupId>javax.servlet.jsp.jstl</groupId> <artifactId>javax.servlet.jsp.jstl-api</artifactId> <version>1.2.2</version> </dependency> ``` **验证**:确保JSP头部有标签库声明[^2]。 ##### 3. 增强后端验证逻辑 ```java // Servlet示例 protected void doPost(HttpServletRequest request, HttpServletResponse response) { String username = request.getParameter("username"); String password = request.getParameter("password"); if (isValidUser(username, password)) { request.getSession().setAttribute("user", username); response.sendRedirect("home.jsp"); } else { // 使用request而非session避免残留 request.setAttribute("errorMsg", "用户名或密码错误"); request.getRequestDispatcher("login.jsp").forward(request, response); } } ``` **关键点**:优先使用`request`作用域传递错误信息。 ##### 4. 前端表单优化 ```html <form action="LoginServlet" method="post"> <input type="text" name="username" required placeholder="用户名"> <input type="password" name="password" required placeholder="密码"> <input type="submit" value="登录"> <!-- 添加CSRF令牌 --> <input type="hidden" name="csrfToken" value="${sessionScope.csrfToken}"> </form> ``` ##### 5. 调试工具使用 - **浏览器开发者工具**:检查Network选项卡确认请求参数和响应状态码 - **服务端日志**:在`web.xml`配置`<logging-level>FINE</logging-level>`捕获详细错误 --- #### 三、预防措施 1. **会话管理** - 使用`request`作用域替代`session`传递临时错误信息 - 设置会话超时:`<session-config><session-timeout>30</session-timeout></session-config>` 2. **依赖管理** 定期检查`pom.xml`中JSTL、Servlet API的版本兼容性 3. **安全加固** - 密码传输使用HTTPS - 重要操作添加验证码 > 通过结合会话管理优化、依赖完善和请求处理逻辑修正,可解决95%以上的JSP登录失败问题。若涉及跨域需参考引用[4]设置响应头[^4]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值