这篇博客展示了如何利用HTML、CSS和JavaScript中的Ajax技术与PHP进行交互，实现无刷新的用户登录功能。当用户点击登录按钮时，Ajax发送GET请求到index.php，将表单中的用户名和密码数据序列化并传递。PHP接收到数据后，验证用户名和密码，如果匹配成功则返回success，否则返回fail。这个过程有助于提升用户体验，简化页面操作流程。
index.html内容如下
ul{
list-style: none;
}
User Login
- Username
- Password
$(document).ready(function(){
$("#ajaxBtn").click(function(){
$.ajax({
'type':'get',
'url':'index.php',
'dateType':'json',
'data':$("input").serialize(),
'success':function(res){
console.log(res);
}
});
});
});
index.php内容如下
header("Content-type:text/html;charset=utf-8");
$username = $_GET['username'];
$password = $_GET['password'];
$res = array('code'=>1,'msg'=>'','data'=>[]);
if($username == 'ceshi' && $password == '123456'){
$res['msg'] = "success";
}else{
$res['code'] = 0;
$res['msg'] = 'fail';
}
echo json_encode($res);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
