php Ajax前后台交互案例-蒲公英云

php Ajax前后台交互案例

前台:

<html>
<head>
    <meta charset="utf-8">
    <title>前后台交互案例</title>
    <script src="jquery-3.4.1.js"></script>
<body>
    <span>用户名:</span><input type="text" class="uname"><br/>
    <span>密码:</span><input type="text" class="pwd"><br/>
    <button>用户登录</button>
    <script >
    var $btns=$("button");
    var $input=$(".uname");
    var $pwdInput=$(".pwd");
        $btns.click(function(){ 
            $.ajax({ 
                type:"post",
                url:'3.php',
                dataType:'json',
                data:{ 
                    uname2:$input.val(),
                    password:$pwdInput.val()
                },
                success:function(res)
                { 
                    if(res['info']==0)
                    { 
                        alert('登陆失败,用户名或密码错误');
                    }else if(res.info){ 
                        alert('登陆成功');
                    }
                }
            });
        });
    </script>
</body>
</head>
</html>

后台:

<?php
     $name=$_POST['uname2'];
      $pwd=$_POST['password'];
      $success=array('msg'=>'ok');
      //接受数据判断
      if($name=="大帅哥" && $pwd=="123456")
      { 
          $success['info']=1;
      }else{ 
          $success['info']=0;
      };
     //返回给前端
     echo  json_encode($success);
    //账户名必须是大帅哥
    //密码必须是123456
?>