Ajax实现用户登录的操作

 

需要先绑定控件：

<div>
    <img src="images/pwd.png" alt=""/>
    <input type="password" name="Password" id="pwd"/>
</div>
    <input type="button" value="登录" id="button"/>

Ajax部分代码:

$("#button").click(function(){      //当button被按下
    UserName=$("#username").val();  //获取html元素中的值
    PassWord=$("#password").val();
    $.ajax
    ({
        async:true,                //设异步请求方式
        type: "POST",           //请求方式为post方法
        url: "http://url/Login",  //改为你自己的url
        dataType: "json",       //数据类型为json格式
        data: JSON.stringify({"UserName":UserName,"PassWord":PassWord}),    //请求参数
        contentType: "application/json",
        success: function (data) {        //返回成功的情况，解析返回数据
        Name = data.Name;
        Code = data.Code;
        var flag = data.flag;        //设置标记位
        localStorage.setItem('Code',Code);          //保存关键字到本地，提供其他页面请求
        localStorage.setItem('Name',Name);
        if(flag == 1){         //服务器返回正确             
            alert("登录成功！");
            window.location.href="index.html";    //登录成功后跳转到主页
        }else{                //请求参数与后台数据库中不一致
            alert("该用户不存在!");
        }
    },
    error:function (data) {        //如果发送参数错误
        alert("账号或者密码错误!");
        flag = 0;
        }
    });            
});