页面5秒后跳转到新的页面

页面5秒后跳转到新的页面

程序设计思路:

1. 设计表单,配置action路径,将客户端的携带的数据提交到refreshServlet中
2. 解决请求和响应中的中文乱码问题
3. 接收请求中的参数并封装到一个User对象当中
4. 调用三层架构,访问数据库,校验用户名和密码是否一致,并返回User对象
5. 如果校验成功,动态的去访问Success.html页面
6. 实现5秒后自动页面跳转

前端表单部分代码：

<div class="container" style="width:100%;height:460px;background:#FF2C4C url('../images/loginbg.jpg') no-repeat;">
    <div class="row">
        <div class="col-md-7">
            <!--<img src="../image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
        </div>

        <div class="col-md-5">
            <div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
                <font>会员登录</font>USER LOGIN

                <div>&nbsp;</div>
                <form class="form-horizontal" action="/demo02/refreshServlet" method="post">

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword4" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="inputPassword3" name="password"
                                   placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="inputPassword4" placeholder="请输入验证码">
                        </div>
                        <div class="col-sm-3">
                            <img src="../image/captcha.jhtml"/>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> 自动登录
                                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    <input type="checkbox"> 记住用户名
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" width="100" value="登录" name="submit" border="0"
                                   style="background: url('../images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height:35px;width:100px;color:white;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

前端表单页面没有什么好解释的,使用的BootStrap响应式页面的写法,重点只有一个action路径问题

后端Servlet部分代码：

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //解决中文乱码问题
//        resp.setContentType("text/html;charset=UTF-8");//解决响应的中文乱码方式一
        resp.setHeader("Content-Type","text/html;charset=UTF-8");//解决响应的中文乱码的方式二
        req.setCharacterEncoding("UTF-8");//解决请求中的中文乱码
        //接收参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //封装到User对象中
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        //调用Service层login方法,判断用户是否已经注册
        UserService userService = new UserService();
        try {
            User existUser = userService.login(user);
            resp.getWriter().println(existUser);
            //页面跳转
            if (existUser == null) {
                //登录失败
                resp.getWriter().println("<h1>登录失败,请检查用户名密码是否有误!</h1>");
            } else {
                //登录成功,
                resp.setStatus(302);
                resp.setHeader("Location",req.getContextPath()+"/html/Success.html");//动态的访问文件路径
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

首要的工作就是接收request请求中的参数并进行中文乱码的处理
将接收到的参数封装到User对象当中
调用三层架构,通过dao层访问数据库,校验用户名和密码是否存在,最后返回User
若登录成功则进行页面跳转

response.setHeader()的使用方法

1. n秒刷新页面一次    response.setHeader("refresh","n");
2. n秒后跳转到其他页面   response.setHeader("refresh","2;URL=otherPagename");
3. 访问别的页面    response.setStatus（302）; response.setHeader("location","url");

登录成功后跳转到Success.html,然后5秒后再次跳转回主页index.jsp当中

Success.html代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="5;url=/demo02/index.jsp"/>
    <title>登录成功页面</title>
</head>
<body>
<h1>登录成功</h1>
<h1>5秒后跳转到主页...</h1>
</body>
</html>

在success.html当中加入<meta http-equiv="Refresh" content="5;url=/demo02/index.jsp"/>，
意为：5秒后页面刷新到指定的url中

http-equiv属性

• http-equi是超文本传输协议标题信息，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。
• Refresh（刷新）说明：自动刷新并转到新页面。 用法：；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空） 注意：其中的2是指停留2秒钟后自动刷新到URL网址。
• 更多详细属性