这里是一个简单的 html + ajax 实现页面静态化的例子
html + ajax 实现静态化的基本思路:将所有的请求通过ajax的方式,而不是通过表单提交,a链接的方式提交,所有的接收数据也是通过ajax来接收。这里以html + ajax 实现登陆的例子
login.html文件如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/login1.js"></script>
</head>
<body>
<table>
<tr>
<td></td>
<td><h3>请登陆用户名</h3></td>
<td></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="uname" /></td>
<td></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="pwd" /></td>
<td></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" name="verifyCode" /></td>
<td>
<img id="code" src="verify/code.action">
<a id="refresh">看不清,换一张</a>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="login" value="登陆"/><input type="button" name="register" value="注册"/></td>
<td></td>
</tr>
</table>
</body>
</html>
login.js文件如下:
$(function(){
$("table").css({"border":"1px solid red","margin":"0px auto"});
$("input[name='register']").click(function(){
window.location = "register.jsp";
});
// 登陆
$("#login").unbind("click").bind("click", function(){
var uname=$("input[name=uname]").val();
var pwd=$("input[name=pwd]").val();
if(uname==""||uname==null){
alert("用户名不能为空!");
return false;
}else if(pwd==""||pwd==null){
alert("密码不能为空!");
return false;
}else{
$.ajax({ // ajax登陆请求
url:"login1.action",
type:"post",
data:{"uname":uname,"pwd":pwd},
async:false,
success:function(res){
alert(res);
}
});
}
});
});
处理器如下:
/**
* 用户登陆
*TODO
*LIU
* @param request
* @param response
* @return ModelAndView
*下午2:50:51
*/
@RequestMapping("/login1.action")
@ResponseBody
public Object login1(HttpServletRequest request, HttpServletResponse response) {
// 将用户名和密码保存到user
User user = new User();
user.setUserId(request.getParameter("uname"));
user.setPassword(request.getParameter("pwd"));
String flag = "false";
// 判断登陆是否成功
if(userService.login(user)){
flag = "true";
}else{
flag = "false";
}
return flag;
}
感谢您的阅读,欢迎参观我的个人网站:小嗨词典【 https://www.happydict.cn】