昨天做了一个原生的Ajax判断用户名和密码输入正确,今天在昨天的基础上做一个用jQuery 调用Ajax技术判断用户名和密码输入是否正确的案例!
首先,将jquery-xxx.min.js 引用到jsp中,没有的可以去网上找一个 ! xxx为版本
一、jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%String bathPath=request.getContextPath(); %><!-- 获取绝对根路径 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=bathPath%>/js/jquery-2.1.1.min.js"></script><!--我的放在了js文件夹下-->
<script type="text/javascript">
//ajax异步请求判断用户名是否存在
function isExists(){
//获取用户名内容
var sendContent = document.getElementById("account").value;
//获取错误信息提示对象
var msg = document.getElementById("msg");
console.log(sendContent);//打印到控制台(开发者模式)
$.ajax({
url:"accountIsTrue.handler",//请求地址
type:"post",//请求方式
data:"sendContent="+sendContent,//发送信息
dataType:"text",//服务器响应信息类型,不写则为默认
success:function(responseContent){ //success:function(responseContent)为回调函数 responseContent为接收响应信息
if(responseContent=='false'){
msg.innerHTML='用户名不存在';
document.getElementById("account").select();
}else if(responseContent=='true'){
msg.innerHTML='';
}
}
})
}
//ajax异步请求判断用户密码是否正确
function passwordIsTrue(){
//获取用户名和密码内容
var sendContent = document.getElementById("account").value;
var password = document.getElementById("password").value;
//获取错误信息提示对象
var msg = document.getElementById("msg");
console.log(sendContent);//打印到控制台(开发者模式)
$.ajax({
url:"passwordIsTrue.handler",//请求地址
type:"post",//请求方式
data:"sendContent="+sendContent+"&password="+password,//发送信息
dataType:"text",//服务器响应信息类型,不写则为默认
success:function(responseContent){ //success:function(responseContent)为回调函数 responseContent为接收响应信息
if(responseContent=='false'){
msg.innerHTML="用户密码输入错误";
document.getElementById("account").select();
}else{
msg.innerHTML="";
}
}
})
}
</script>
<style type="text/css">
#d01{
position:absolute;
left:35%;
top:20%;
border:1px solid grey;
text-align:center;
padding:25px;
width: 600px;
height: 250px;
}
.input{
width:300px;
height:25px;
border:1px solid blue;
}
.btn{
width:100px;
height:35;
background-color:blue;
color:white;
}
</style>
</head>
<body bgcolor="035551">
<div id="d01">
<form action="#" method="post" name="submitValidateForm">
<div align="center" style="font-size: 30px;color: white;">jQuery ajax判断用户名和密码是否输入正确</div><br/>
<div>
<p><font color="red"><span id="msg"></span></font></p>
<p><label><span style="color: white;">用户名:</span></label><input type="text" class="input" name="account" id="account" onblur="isExists()"></p>
<p><label><span style="color: white;">用户密码:</span></label><input type="password" class="input" name="password" id="password" onblur="passwordIsTrue()"></p>
<p>
<input type="button" name="submit" class="btn" value="提交" onclick="bsubmit()">
<input type="reset" name="reset" class="btn" value="重置">
</p>
</div>
</form>
</div>
</body>
</html>
二、controller层
@Controller
@ResponseBody
public class AjaxLoginController {
@Autowired
private AjaxLoginService ajaxLoginService;
public AjaxLoginService getAjaxLoginService() {
return ajaxLoginService;
}
public void setAjaxLoginService(AjaxLoginService ajaxLoginService) {
this.ajaxLoginService = ajaxLoginService;
}
/**
* 查找用户(看用户是否存在)
* @param sendContent
* @param response
* @return
* @throws IOException
*/
@Autowired
HttpServletResponse response;
@RequestMapping("accountIsTrue.handler")
public String findAccount(@RequestParam("sendContent") String sendContent) throws IOException {
System.out.println(sendContent);
boolean flag = ajaxLoginService.findAccount(sendContent);
System.out.println(flag);
PrintWriter out = response.getWriter();//给页面响应
if(flag==true) {
out.print(true);
}else {
out.print(false);
}
return null;
}
/**
* 根据用户名查找密码
* @param model
* @param sendContent
* @param password
* @return
* @throws IOException
*/
@RequestMapping("passwordIsTrue.handler")
public String passwordIdTrue(Model model,String sendContent,String password) throws IOException {
System.out.println(sendContent+password);
String resultPassword = ajaxLoginService.findPassword(sendContent);
PrintWriter out = response.getWriter();//给页面响应
/*根据用用户名查到的密码和页面传过来对的密码做对比,
如果两者一样说明密码输入正确,
如果查到的密码和页面输入的密码不一样,说明输入的密码不正确*/
if(resultPassword.equals(password)) {
out.print(true);;
}else {
out.print(false);;
}
return null;
}
}
如果页面传过来的中文出现乱码,请参考昨天写的“原生ajax判断用户名和密码是否输入正确”里边的过滤器配置,配置过滤器后中文乱码问题就会得以解决。
结束!!!
赠言:jQuery调用Ajax技术还有另外几种方式,上述只是其中的一种,上述的只要学会,其他几种只需参考就能弄懂