简单实现前后台的交互--登录页面

最新推荐文章于 2024-03-27 19:09:08 发布

白菜炖咸鱼

最新推荐文章于 2024-03-27 19:09:08 发布

阅读量2.8k

点赞数

文章标签：前后端简单交互

本文链接：https://blog.csdn.net/qq_45675876/article/details/102758772

版权

一、前端代码

<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":{}}';
 }

白菜炖咸鱼

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
简单实现前后台的交互--登录页面

一、前端代码<body> 用户名：<input type="text" id="user" /><br/> 密码：<input type="text" id="pass" /><br/> <input type="button" value="登录" id="login" /> <span>&lt...
复制链接

扫一扫