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

先把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="登    录" οnclick="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="登    录" οnclick="PostData()"/>

  type="submit" 和  type="button"的区别是什么？

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