JavaWeb09-HTML篇笔记（三）

1.1 案例二：登录成功以后5秒钟跳转到另一个页面. 1.1.1 需求:

在登录成功后,页面5秒钟跳转到其他的一个页面.

1.1.2 分析: 1.1.2.1 技术分析:

【使用Http协议中的Refresh头信息】

Refresh之前已经介绍可以定时页面跳转.需要使用程序设置头信息才可以.

【response中设置响应头】

* addHeader(String name,String value);  --- 针对一个key对应多个value的响应头.
    * addDateHeader(String name,long date);
    * addIntHeader(String name,int value);
  
* setHeader(String name,String value);  --- 针对一个key对应一个value的响应头.
    * setDateHeader(String name,long date);
    * setIntHeader(String name,int value);
  
例如:头信息: xxx:aaa
    * addHeader(“xxx”,”bbb”);   -->xxx:aaa,bbb
    * setHeader(“xxx”,”bbb”);   -->xxx:bbb
1.1.3 代码实现:
在登录成功后的代码上,定时的跳转.
public class UserRefreshServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
// 解决向页面输出中文的乱码问题!!!
response.setContentType("text/html;charset=UTF-8");
// 1.接收表单提交的参数.
String username = request.getParameter("username");
String password = request.getParameter("password");
// 2.封装到实体对象中.
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 3.调用业务层处理数据.
UserService userService = new UserService();
User existUser = userService.login(user);
// 4.根据处理结果显示信息(页面跳转).
if(existUser == null){
// 登录失败
response.getWriter().println("<h1>登录失败:用户名或密码错误！~</h1>");
}else{
// 登录成功
// response.getWriter().println("Login Success...");
response.getWriter().println("<h1>登录成功!您好:"+existUser.getNickname()+"</h1>");
response.getWriter().println("<h3>页面将在5秒后跳转！</h3>");
response.setHeader("Refresh", "5;url=/day09/demo5-refresh/index.html");
}
} catch (Exception e) {
e.printStackTrace();
}
}
  
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
  
}

1.1.4 总结: 1.1.4.1 使用JS控制读秒的效果.

<script type="text/javascript">
var time = 5;
window.onload = function(){
setInterval('changeTime()',1000);
}
function changeTime(){
time--;
document.getElementById("s1").innerHTML = time;
}
</script>