前台:
<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
?>
