Javaweb让浏览器定时刷新(倒计时效果实现)
<td colspan="2">登录</td></tr><tr><td>账号<input type="text" name="username"><span style="color:pink"> <%=fail==null?
·
一、项目结构
效果
-
用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>
三、运行结果
更多推荐
已为社区贡献1条内容
所有评论(0)