Asp.net 登陆页面的Ajax异步身份验证的实现

来源:互联网 发布:网络机顶盒软件大全 编辑:程序博客网 时间:2024/06/07 05:25

先把js脚本写出来:

 <script type="text/javascript">        function ValidForm() {            if (!$('#commentForm').valid())                return false;            else                return true;        }        function PostData() {            if (ValidForm()) {                var uName = $('#username').val();                var pwd = $('#password').val();                $.ajax(                {                    url: 'Services/Login.ashx',                    data: { username: uName, password: pwd },                    type: 'post',                    dataType: 'json',                    success: function (data) {                        if (data.Code == 200) {                            window.location = 'Default.aspx';                        }                        else {                            $('#spError').show();                            $('#spError').text(data.Message);                        }                    },                    error: function (xhr, e, textStatus) {                        var isAjaxRedirect = xhr.status == 200                             && xhr.responseText.match(/!expire/);                        if (isAjaxRedirect == '!expire') {                            $('#spError').text('提交错误,页面超时请重试!');                        }                        else                            $('#spError').text('提交错误,请重试!');                    }                });            }        }    </script>
                <div class="lg_form">                    <div class="lg_con">                        <div class="lg_land_name">                            请登录                        <span class="field-validation-error" style="display:none;" id="spError"></span></div>                        <form class="cmxform" id="commentForm" method="post" action="">                        <div class="lg_form_cn">                            <table width="100%" border="0" cellspacing="0" cellpadding="0">                                <tr valign="top">                                    <td width="20%" align="right">                                        <span class="email_pad">用户名</span>                                    </td>                                    <td width="74%">                                        <input class="ttext ipt1 {required:true,messages:{required:'请输入用户名'}}"                                            id="username" name="username" type="text" value="" />                                    </td>                                    <td width="6%">                                    </td>                                </tr>                                <tr valign="top">                                    <td align="right">                                        <span class="email_pwl">密</span><span class="email_pwr">码</span>                                    </td>                                    <td>                                        <input class="ttext ipt1 {required:true,messages:{required:'请输入密码'}}" id="password"                                            name="password" type="password" value="" />                                    </td>                                    <td>                                    </td>                                </tr>                            </table>                        </div>                        <input name="repc" type="hidden" value="false" />                        <table width="100%" border="0" cellspacing="0" cellpadding="0">                            <tr>                                <td width="30%">                                                                     </td>                                <td width="25%" height="80">                                    <input type="button" class="free_btn3" value="登    录" onclick="PostData()"/>                                </td>                                <td width="45%">                                </td>                            </tr>                        </table>                        </form>                    </div>                </div>


然后是服务器端的C#验证:Login.ashx
 /// <summary>    /// Login 的摘要说明    /// </summary>    public class Login : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            ResponseResult result;            string name = context.Request["username"];            string password = MD5.getMd5(context.Request["password"]);            UserLogic logic = new UserLogic();            bool right = logic.Login(name, password);            if (right == true)            {                result = new ResponseResult { Code = 200, Message = "验证成功!" };            }            else            {                result = new ResponseResult { Code = 400, Message = "用户名或者密码错误!" };            }            context.Response.Write(JsonConvert.SerializeObject(result));        }        public bool IsReusable        {            get            {                return false;            }        }    }

讨论:

 <input type="button" class="free_btn3" value="登    录" onclick="PostData()"/>
  type="submit" 和 type="button"的区别是什么?

Ok,看到这里,想必就明白了吧。