使用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("账号或密码错误，请重新输入！");
            }
        }
    });      
}