JS之AJAX实现登录跳转
主要知识点
1）Ajax的工作原理分析
* 异步为例
* a.浏览器让XMLHttpRequest去向服务器发去请求
* b.浏览器接着干别的事
* c.XMLHttpRequest去向服务器发去请求数据
* d.服务器返回数据
* c.XMLHttpRequest通知浏览器数据返回了
* d.浏览器收到XMLHttpRequest返回的数据渲染到页面
代码
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登陆</title>
</head>
<body>
<h2>用户登录</h2>
<form>
<div>用户名：<input type="text" name="name"></div>
<div>密码：<input type="password" name="pwd"></div>
<div><button type="button" id="btn">提交</button></div>
</form>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
var name = document.getElementsByName('name')[0].value;
var pwd = document.getElementsByName('pwd')[0].value;
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听响应状态
xhr.onreadystatechange = function(){
// 就绪
if(xhr.readyState === 4) {
// 判断响应结果
if(xhr.status === 200) {
// 响应成功
var p = document.createElement('P');
p.style.color = 'red';
// 响应结果
var data = JSON.parse(xhr.responseText);
if(data.status === 1){
p.innerHTML = data.msg;
} else {
p.innerHTML = data.msg;
}
document.forms[0].appendChild(p);
btn.disabled = true;
// 2s跳转
setTimeout(function(){
btn.disabled = false;
if(data.status === 1){
location.href = 'index.php?username=theYon';
}
},2000);
} else {
alert('error: '+xhr.status);
}
} else {
console.log('error');
}
}
// 设置请求参数
xhr.open('post','demo1.php',true);
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送请求
var data = {
name:name,
pwd:pwd
}
var data_json = JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</html>demo1.php
<?php
// 获取请求数据
$user = json_decode($_POST['data']);
$name = $user->name;
$pwd = sha1($user->pwd);
// 链接数据库
try{
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
} catch(PDOException $e) {
die($e->getMessage());
}
$sql = "SELECT COUNT(*) FROM `user` WHERE `user_name`= '{$name}' AND `password`= '{$pwd}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0) == 1){
echo json_encode(['status'=>1,'msg'=>'登陆成功...']);
exit;
} else{
echo json_encode(['status'=>0,'msg'=>'账号或密码错误,登录失败!']);
exit;
}index.php
<?php
if(isset($_GET['username'])){
$username = $_GET['username'];
echo "<h1>{$username},欢迎您使用<h1>";
} else {
echo '<a href="login.html">请登陆</a>';
}运行结果
