摘要: Ajax登录验证
最近做了几个项目,都是用Ajax进行前后台交互的,交互的数据都是json格式的。虽然Ajax的全称是Asynchronous JavaScript And XML,即异步JavaScript和XML,但是因为json作为数据交换格式不仅比XML简单而且网络传输数据量更小,所以逐渐取代了Ajax中XML的地位。下面就以最近做的一个登录验证为例向大家展示一下交互过程:
1、首先是HTML代码:调用check( )方法进行验证
<div class="form-signin" role="form" >
<input type="text" class="form-control" id="userName" placeholder="用户名" required autofocus />
<input type="password" class="form-control" id="passWord" placeholder="密码" required />
<button class="btn btn-lg btn-warning btn-block" onclick="check()">登录</button>
</div>
2、其次是JS代码:
2.1、获得用户名和密码的value值
2.2、通过Ajax用post方式提交给URL:http://120.24.215.101:8288/Home/admin/login.do
2.3、提交的数据为data:'adminName='+userName+'&adminPassword='+passWord
2.4、http://120.24.215.101:8288/Home/admin/login.do返回的数据为
{"retMsg":null,"code":0,"data":null}
其中retMsg一般不用管;code为判定结果,一般1代表true,0代表false,具体情况由后台决定;data为后台返回的数据,这里仅作登陆判定,不需要后台返回数据,故返回null。
2.5、调用请求成功后的回调函数success( ),后台对提交的数据进行判断,如果成功重定向到后台管理页面,失败则弹出警告框。
function check() {
var userName=$('#userName')[0].value;
console.log(userName);
var passWord=$('#passWord')[0].value;
console.log(passWord);
$.ajax({
type:'POST',
url:'http://120.24.215.101:8288/Home/admin/login.do',
data:'adminName='+userName+'&adminPassword='+passWord,
success:function(data){
if(data.code==1){
window.location.href = "./admin.html";
}else{
alert("账号或密码错误,请重新输入!");
}
}
});
}
注意:JS代码使用了jQuery库,使用前要先引入jQuery库。
© 著作权归作者所有