JavaScriptAjaxPost方式用户登陆

最新推荐文章于 2022-07-18 10:47:25 发布

xuxin_2821

最新推荐文章于 2022-07-18 10:47:25 发布

阅读量656

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xuxin_2821/article/details/97926914

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、前台代码部分如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function() {
            request = createRequest();
        }

        function send() {
            var name = $("txtName").value;
            var pwd = $("txtPwd").value;
            var data = "name=" + encodeURIComponent(name) + "&pwd=" + encodeURIComponent(pwd);

            request.open("post", "Login.ashx", true);
            //post过程必须设置 下面的请求头，必须在open之后
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //request状态改变后 执行的操作
            request.onreadystatechange = function() {
                //接受完响应
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        //响应文本
                        var result = request.responseText;
                        if (result == "1") {
                            $("s").innerHTML = "登陆成功";
                            $("login").style.display = "none";
                            $("success").style.display = "block";
                        } else if (result == "0") {
                            //登陆失败
                            $("s").innerHTML = "登陆失败";
                        }
                        else {
                            $("s").innerHTML = "未知错误";
                        }
                    }
                    else {
                        $("s").innerHTML = "服务器内部错误";
                    }
                }
            }
            //发送post的数据
            request.send(data);
        }
    
    </script>
</head>
<body>
    <div id="login">
        用户名：<input type="text" id="txtName" /><br />
        密码：<input type="text" id="txtPwd" /><br />
        <input type="button" value="login" onclick="send()"/>
        <span id="s"></span>
    </div>
    
    <div id="success" style="display:none">
        登陆成功。。。
    </div>
    
    <form method="post">
        <input type="submit" />
    </form>
</body>
</html>

上面调用的JS文件的代码：

var request;
//创建XMLHttpRequest对象
function createRequest() {
    var request;
    if (window.XMLHttpRequest) {
        //chrome firefox等浏览器创建的方式
        request = new XMLHttpRequest();
    } else if (ActiveXObject) {
        //ie创建的方式
        request = new ActiveXObject("Microsoft.XMLHTTP");

    }
    return request;
}

function $(id) {
    return document.getElementById(id);
}

2、后台代码部分如下：

string name = context.Request.Form["name"];
string pwd = context.Request.Form["pwd"];

//1 登陆成功  0 登陆失败
if (name == "admin" && pwd == "admin")
{
    context.Response.Write("1");
}
else
{
    context.Response.Write("0");
}