php json登录注册,json与ajax实现用户登录验证

摘要：1. 登录页面(login.html)

       ajax与json进行无刷新表单验证

1. 登录页面(login.html)

ajax与json进行无刷新表单验证

用户登录

登录

function login() {

let btn = document.getElementsByTagName('button')[0];

let username = document.getElementsByName('username')[0];

let password = document.getElementsByName('password')[0];

/*console.log(username.value.length);

if (username.value.length == 0) {

let span = document.createElement('span');

span.style.color = 'red';

span.innerText('用户名不能为空');

document.username.append(span);

}*/

// 1.创建xhr对象

let xhr = new XMLHttpRequest();

// 2.监听响应状态

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

let p = document.createElement('p');

p.style.color = 'red';

let json = JSON.parse(xhr.responseText);

if (json.code === 1) {

p.innerHTML = json.msg;

document.forms[0].appendChild(p);

btn.disabled = true;

setTimeout(function () {

document.forms[0].removeChild(p);

btn.disabled = false;

if (json.code == 1) {

location.href = 'inc/admin.php';

}

}, 2000)

}else {

p.innerHTML = json.msg;

document.forms[0].appendChild(p);

btn.disabled = true;

setTimeout(function () {

document.forms[0].removeChild(p);

btn.disabled = false;

return false;

}, 2000)

}

}

};

//3.设置请求参数

xhr.open('post','inc/check.php',true);

//4.设置请求头信息,将内容类型设置为表单提交方式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//5.发送请求

let data = {

username: username.value,

password: password.value

};

let data_json = JSON.stringify(data);

xhr.send('data='+data_json);

}

2.验证代码(check.php)

//echo json_encode('测试数据');

$user = json_decode($_POST['data']);

$name = trim($user->username);

$password = sha1(trim($user->password));

$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');

$sql = "SELECT COUNT(*) FROM `user` WHERE `name`=:name AND `password`=:password ";

//$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";

$stmt = $pdo->prepare($sql);

$stmt->execute(['name'=>$name,'password'=>$password]);

$res = $stmt->fetchColumn(0);

if ($res ==1) {

exit(json_encode(['code'=>1,'msg'=>'登录成功,正在跳转...']));

} else {

exit(json_encode(['code'=>0,'msg'=>'邮箱或密码错误,登录失败']));

}

批改老师：欧阳批改时间：2019-05-16 09:09:45

老师总结：完成的不错，json数据可以在不同的编程语言中传递数据。好好练习，继续加油