Javaweb让浏览器定时刷新（倒计时效果实现）

最新推荐文章于 2024-03-27 22:25:35 发布

心凡138

最新推荐文章于 2024-03-27 22:25:35 发布

阅读量567

点赞数 1

本文链接：https://blog.csdn.net/weixin_73509711/article/details/133778229

版权

一、项目结构

效果

用UserController访问网页/register
然后会将请求转发到refresh.jsp页面
等待3秒后或者点击链接会自动刷新，跳转到登录界面login2

倒计时结束跳到另一个界面

二、实例：

1、先在web里建一个register.jsp文件当注册界面

<body>
<%
    HashMap<String,String> error = ((HashMap<String, String>)request.getAttribute("error"));
    String registerfail = request.getParameter("registerfail");
%>
<span><%=registerfail==null?"":registerfail%></span>

<form action="UserController" method="post" onsubmit="funna()">
    <input type="hidden" value="register" name="userAction">
    <table width="30%" height="300px" border="1" id="table01">
        <tr align="center">
            <td colspan="2">注册</td>
        </tr>
        <tr>
            <td>用户名：</td><td><input type="text" name="username"><%=error==null?"":error.get("username")==null?"":error.get("username")%></td>
        </tr>
        <tr>
            <td>密码：</td><td><input type="text" name="password"><%=error==null?"":error.get("password")==null?"":error.get("password")%></td>
        </tr>
        <tr>
            <td>年龄：</td><td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>出生年月：</td><td><input type="text" name="birthday"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" value="女" name="gender">女
                <input type="radio" value="男" name="gender">男
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" value="篮球" name="hobbies">篮球
                <input type="checkbox" value="羽毛球" name="hobbies">羽毛球
                <input type="checkbox" value="足球" name="hobbies">足球
            </td>
        </tr>
        <tr>
            <td>地址</td>
            <td>
                <select name="address">
                    <option value="成都">成都</option>
                    <option value="贵州">贵州</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>备注：</td>
            <td><textarea cols="30" rows="10" name="remark"></textarea> </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册" id="submit">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
    
</form>
</body>

2、点击跳转然后浏览器刷新

refresh.jsp文件装浏览器刷新跳转

<html>
<head>
    <title>Title</title>
</head>
<body>
    注册成功！<span id="span01" style="color: red">5</span>秒后自动跳转到登录页面，如果没有跳转点击<a href="login2.jsp">登录</a>
    <script language="JavaScript">
        function fun1() {
            var span01 = document.getElementById("span01");
            var i = span01.innerHTML;
            if(i>0){
                i = i-1;
                span01.innerHTML = i;
            }
        }
        window.setInterval("fun1()",1000);
        <%
        response.setHeader("refresh","5;url=/login2.jsp");
        %>
    </script>
</body>
</html>

3、servler层

@WebServlet("/UserController")
public class UserController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userAction = req.getParameter("userAction");
        //处理中文乱码
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
         //注册
        if ("register".equals(userAction)){
            //接收数据和封装
            User user = new User();
            try {
                BeanUtils.populate(user,req.getParameterMap());
                user.setHobbies(ArrayToString.arrayToString(req.getParameterValues("hobbies")));
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }//验证数据
            Map<String,String> error = new HashMap<>();
            System.out.print("11111");
            if (error.isEmpty()){
               
                //调用service处理业务
                UserService userService = new UserService();
                int state = userService.register(user);
                if (state==0){
                    resp.sendRedirect("/registerfail.jsp");
                }
                if (state==1){
                    resp.sendRedirect("/refresh.jsp");
                }
                if (state==2){
                    resp.sendRedirect("/register.jsp?registerfail="+ URLEncoder. encode( "该用户已经存在!", "utf-8"));
                }
            }else {//带错误数据跳转到注册界面
                req. setAttribute( "error", error);
                req.getRequestDispatcher( "/register.jsp").forward(req, resp);
            }
        }
}
}

4、最后是登录界面login2.jsp

<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    HashMap<String,String> error = ((HashMap<String, String>)request.getAttribute("error"));
    String fail = (String)request.getAttribute("fail");
%>
<form action="UserController" method="post">
    <input type="hidden" value="login" name="userAction">
    <table border="1" align="center">
        <tr align="center"><td colspan="2">登录</td></tr>
        <tr>
            <td>账号<input type="text" name="username"><span style="color:pink"> <%=fail==null?"":fail%></span><span style="color:pink"> <%=error==null?"":error.get("username")==null?"":error.get("username")%></span></td>
        </tr>
        <tr>
            <td>密码<input type="text" name="password"><span style="color:pink"> <%=error==null?"":error.get("password")==null?"":error.get("password")%></span></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="提交"><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
</body>
</html>

三、运行结果

心凡138

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Javaweb让浏览器定时刷新（倒计时效果实现）

<td colspan="2">登录</td></tr><tr><td>账号<input type="text" name="username"><span style="color:pink"> <%=fail==null?
复制链接

扫一扫