后台管理系统的登录实现ajax异步刷新——
登录页面前端——
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户编辑</title>
<style>
h3 {
text-align: center;
}
div {
width: 300px;
height: 180px;
/*background-color: lightblue;*/
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px dashed #888;
border-radius: 5%;
}
div input {
border: none;
border-bottom: 1px solid #333;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<h3>用户编辑</h3>
<div>
<form name="user">
<p>
<label>用户名:
<input type="text" name="name" value="<?= $user['name'] ?>" disabled>
</label>
</p>
<p>
<label>邮 箱:
<input type="email" id="email" name="email" value="<?= $user['email'] ?>" autofocus>
</label>
</p>
<p>
<label>密 码:
<input type="password" id="password" name="password" value="<?= $user['password'] ?>">
</label>
</p>
<!-- 将当前用户的id,做为更新条件,以隐藏域的方式发送到服务器端-->
<input type="hidden" id="id" value="<?= $user['id'] ?>">
<p>
<button type="button" onclick="save(this.form)">保存</button>
<button type="button" onclick="history.back()">取消</button>
</p>
<!-- 提示信息占位符-->
<p></p>
</form>
</div>登录页面后端部分（用于从数据库中获取资源）——
<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php', 'root', 'root');
$sql = 'SELECT * FROM `user` where `id` = :id';
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
?>登录页面js部分（ajax异步刷新）——
<script>
function save(form) {
var tips = form.lastElementChild;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
// tips.innerHTML = 'success';
var data = JSON.parse(request.responseText);
console.log(data);
switch (data.status) {
case 1:
tips.classList.add('success');
case 0:
tips.classList.add('error');
case -1:
tips.classList.add('error');
}
tips.innerHTML = data.message;
setTimeout(function () {
history.back();
},2000);
}
}
request.open('POST', 'ajax_manage.php?action=save');
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
request.send('email=' + form.email.value + '&password=' + form.password.value + '&id=' + form.id.value);
}
</script>注：setTimeout——延时触发器
JSON.parse——解析json字符串，得到js变量
上述代码中将数据提交给ajax_manage.php
ajax数据接收处理页面——
<?php
// 屏蔽php的通知级别的错误
//error_reporting(E_ALL ^ E_NOTICE);
// 屏蔽php的警告级别的错误
error_reporting(E_ALL ^ E_WARNING);
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php', 'root', 'root');
$action = strtolower(trim($_GET['action']));
if ($action === 'save') {
$sql = 'UPDATE `user` SET `email` = :email,`password` = :password WHERE `id` = :id';
$stmt = $pdo->prepare($sql);
$email = strtolower(trim($_POST['email']));
$password = sha1(strtolower(trim($_POST['password'])));
$id = strtolower(trim($_POST['id']));
$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->bindParam(':email', $email, PDO::PARAM_STR, 60);
$stmt->bindParam(':password', $password, PDO::PARAM_STR, 20);
if ($stmt->execute()) {
if ($stmt->rowCount() == 0) {
$status = 0;
$message = '信息未更新';
} else {
$status = 1;
$message = '信息更新成功';
}
} else {
// 项目如何上线商用, 直接提示出错即可, 不要输出具体出错信息
// die(print_r($stmt->errorInfo()))
$status = -1;
$message = '信息更新失败';
}
echo json_encode(['status' => $status, 'message' => $message]);
}
?>注：json_encode——将php变量变为json字符串
strtolower（）——将字符串中的字符转换为小写字母
trim（）——去除其中的空格
