标签：status function span 登录 res user pass 交互 页面
一、前端代码
<body>
用户名：<input type="text" id="user" /><br/>
密码：<input type="text" id="pass" /><br/>
<input type="button" value="登录" id="login" />
<span></span>
<script src="ajax.js"></script>
<script>
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/ajxa/data/login.php";
this.init();
}
Login.prototype.init = function(){
var _this = this;
this.login.onclick = function(){
//回调函数 在ajax请求成功的时候执行 将来请求成功 ajax的异步问题
ajaxGet(_this.url,function(res){
// console.log(res);
//要获得对象中的status 转为对象拿出来
//数据的解析
_this.res = JSON.parse(res);
//2.ajax的回调函数的异步:只要想拿到ajax请求成功的数据,必须在ajax请求成功之后,再执行下面的方法
_this.display();
},{
user:_this.user.value,
pass:_this.pass.value
});
}
}
Login.prototype.display = function(){
// console.log(this.res);
switch(this.res.status){
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>";
}
}
new Login();
</script>
</body>二、后端php代码
//模拟从mysql获取到的数据
$u = "admin";
$p = "123";
$user = @$_REQUEST["user"];
$pass = @$_REQUEST["pass"];
//1.php返回数据的格式
if($u == $user && $p == $pass){
echo '{"msg":"成功","status":0,"userMsg":{}}';
}else if($u == $user && $p != $pass){
echo '{"msg":"密码错误","status":1,"userMsg":{}}';
}else{
echo '{"msg":"该用户不存在","status":2,"userMsg":{}}';
}标签：status,function,span,登录,res,user,pass,交互,页面 来源： https://blog.csdn.net/qq_45675876/article/details/102758772
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。