js和ajax实现数据验证并登录_min.js ajax连数据库验证-优快云博客

本文介绍了如何结合JavaScript和AJAX技术进行前端数据验证，并实现实时与服务器交互完成登录功能。通过JS对用户输入进行初步检查，然后利用AJAX无刷新提交数据到后台ASHX处理，提高用户体验。

js部分

<script type="text/javascript">
    $().ready(function () {
        $('#Login').click(function () {
            if ($('#username').val() == "" || $('#password').val() == "") {
                alert("用户名或密码不能为空！");
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "Logincheck.ashx",
                    data: "userid=" + escape($('#userid').val()) + "&password=" + escape($('#password').val()),
                    success: function (msg) {                       
                        if (msg == "success") {
                            parent.document.location.href = "index.aspx"; //如果登录成功则跳到管理界面
                        }
                        if (msg == "fail") {
                            alert("密码错误！");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, thrownError) {
                    }
                });
            }
        });
    });
</script>

html部分

            <input id="userid" type="text" placeholder="用户名" class="layui-input" />
            <input id="password" type="password" name="password" placeholder="密码" class="layui-input" />
            <input type="submit" id="Login" value="登录" style="width: 100%;" />

ashx部分

        public void ProcessRequest(HttpContext context)
        {
            string userid = context.Request["userid"].ToString();
            string password = context.Request["password"].ToString();

            //此处连接数据库查看是否有此用户，此处为了方便起见，直接判断

            if (userid="111"||password="111")
            {
                context.Response.Write("success");
            }
            else
            {
				context.Response.Write("fail");
                }

            }
        }