ajax实现登陆

function Login(){
this.user = document.getElementById(“user”);
this.pass = document.getElementById(“pass”);
this.login = document.getElementById(“login”);
this.span = document.querySelector(“span”);
this.url = “http://localhost/1910-server/ajax/data/login.php”;

    this.init();
}
Login.prototype.init = function(){
    var that = this;
    this.login.onclick = function(){
        ajaxGet(that.url,function(res){
            // 3.数据的解析
            that.res = JSON.parse(res)
            // 2.ajax的回调函数的异步:只要想拿到ajax请求成功的数据,必须在ajax请求成功之后,在执行下面的方法
            that.display();
        },{
            user:that.user.value,
            pass:that.pass.value
        })
    }
}
Login.prototype.display = function(){
    // console.log(this.res)
    switch(this.res.statu){
        case 0:
            this.span.innerHTML = "欢迎登录";break;
        case 1:
            this.span.innerHTML = this.res.msg;break;
        case 2:
            this.span.innerHTML = this.res.msg + "<a href='http://www.baidu.com'>去注册</a>";break;
    }
}

new Login();
<?php - // 模拟从mysql获取到的数据 $u = "admin"; $p = "123456"; $user = @$_REQUEST["user"]; $pass = @$_REQUEST["pass"]; // 1.php返回数据的格式 if($u == $user && $p == $pass){ echo '{"msg":"成功","statu":0,"userMsg":{}}'; }else if($u == $user && $p != $pass){ echo '{"msg":"密码错误","statu":1}'; }else{ echo '{"msg":"该用户名不存在","statu":2}'; } ?>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 Ajax 实现登录,可以按照以下步骤进行: 1. 创建一个登录表单,包含用户名和密码输入框,以及提交按钮。 2. 在 JavaScript 中,获取表单元素和提交按钮元素,并通过 addEventListener() 方法为提交按钮添加 click 事件监听器。 3. 在事件监听器中,获取用户名和密码输入框中的值,并创建一个 XMLHttpRequest 对象。 4. 使用 XMLHttpRequest 对象发送 POST 请求,向后端服务器发送登录请求,并传递用户名和密码参数。 5. 在请求成功后,获取服务器返回的响应数据,并根据响应数据决定是否登录成功。 6. 如果登录成功,可以在前端页面中显示一条登录成功的提示信息,并进行相应的页面跳转。 以下是一个示例代码,供参考: ```html <form id="login-form"> <label>用户名:</label> <input type="text" id="username" name="username"><br> <label>密码:</label> <input type="password" id="password" name="password"><br> <button type="button" id="login-button">登录</button> </form> <script> var form = document.getElementById('login-form'); var usernameInput = document.getElementById('username'); var passwordInput = document.getElementById('password'); var loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert('登录成功!'); window.location.href = '/home'; } else { alert('登录失败,请检查用户名和密码!'); } } else { alert('登录失败,请稍后再试!'); } }; var data = 'username=' + encodeURIComponent(usernameInput.value) + '&password=' + encodeURIComponent(passwordInput.value); xhr.send(data); }); </script> ``` 请注意,以上示例代码仅为参考,具体实现方式可能因后端服务器的不同而有所差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值