整个用户编辑功能的流程：1-->2-->3
user_list.php :显示用户信息，查询操作 select
user_edit.php :用户编辑，需要一介编辑信息的界面，通过ajax异步提交的方式
user_manager.php :处理脚本，user_manager.php?action=save
实例(主界面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理系统</title>
<style>
/*样式重置*/
h2, p, ul {
padding: 0;
margin: 0;
}
/*头部样式*/
.header {
height: 60px;
/*background-color: lightblue;*/
border-bottom: 1px solid #333;
line-height: 60px;
}
.header .content {
width: 1000px;
/*background-color: lightgray;*/
overflow: hidden;
margin: 0 auto;
}
.header .content h2 {
float:left
}
.header .content p {
float:right;
}
/*主体样式*/
.main {
width: 1000px;
min-height: 650px;
/*background-color: lightcyan;*/
margin: 0 auto;
position: relative;
}
.main .left {
width: 120px;
min-height: inherit;
/*background-color: lightgreen;*/
border-right: 1px solid #333;
position: absolute;
left: 0;
top: 0;
}
.main .right {
width: 880px;
min-height: inherit;
/*background-color: lightyellow;*/
position: absolute;
left: 121px;
top: 0;
}
/*左侧菜单样式*/
.main .left ul {
position: absolute;
left: 30px;
top: 50px;
}
.main .left li {
list-style-type: none;
line-height: 50px;
}
.main .left li a {
text-decoration-line: none;
}
.main .left li a:hover {
text-decoration-line: underline;
color: red;
}
/*右侧工作区样式*/
.main .right iframe {
width: 880px;
min-height: 650px;
border: none;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="content">
<h2>员工管理系统</h2>
<p>管理员: admin | <a href="">退出</a></p>
</div>
</div>
<!--中部-->
<div class="main">
<!--左侧菜单-->
<div class="left">
<ul>
<li><a href="staff_list.php" target="workspace">员工管理</a></li>
<li><a href="system.php" target="workspace">系统设置</a></li>
<li><a href="user_list.php" target="workspace">用户设置</a></li>
</ul>
</div>
<!--右侧内容-->
<div class="right">
<iframe src="staff_list.php" name="workspace"></iframe>
<p style="text-align: center;margin-top: -100px;">php中文网 © 版权所有 (2017-2020)</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例（员工信息界面）
<?php
// 员工信息
//1.连接数据库
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
//2.执行的操作
$sql = 'SELECT * FROM `staff` LIMIT 5';
$stmt = $pdo->prepare($sql);
$stmt->execute();
$staffs = $stmt->fetchAll(PDO::FETCH_ASSOC);
//3.关闭连接
$pdo = null;
// 标题
$title = '员工信息表';
// 表格标题
$tableTitle = $title;
// 员工数量
$total = count($staffs);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo $title; ?></title>
<style>
table,th,td {
border: 1px solid #666;
padding: 8px;
}
table {
border-collapse: collapse;
width: 80%;
text-align: center;
margin: 30px auto;
}
thead tr:first-of-type {
background-color: lightblue;
}
tbody tr:hover {
background-color: #efefef;
}
table > caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
table + p {
text-align: center;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
/*添加按钮给个特殊样式*/
#add {
height: 25px;
width: 90px;
position: absolute;
left: 650px;
top: 40px;
}
</style>
</head>
<body>
<button onclick="location.href='#'" id="add">添加</button>
<table>
<caption>
<?php
echo '<span style="color:red">' . $tableTitle . '</span>';
?>
</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<td>入职</td>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--foreach()替代语法-->
<?php foreach($staffs as $staff) : ?>
<tr>
<td><?php echo $staff['id']; ?></td>
<td><?php echo $staff['name']; ?></td>
<td><?php echo $staff['age']; ?></td>
<!--if()替代语法-->
<td>
<?php if($staff['sex'] == 1) : ?>
男
<?php else: ?>
女
<?php endif; ?>
</td>
<!--如果只是简单的输出变量可以使用php短标签语法-->
<td><?=$staff['mobile']?></td>
<td>
<?php
echo date('Y/m/d',$staff['hiredate']);
?>
</td>
<td>
<button onclick="location.href='#'">编辑</button>
<button onclick="location.href='#'"><span style="color:red">删除</span></button>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<p>总计:
<?php echo $total; ?>
人</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例（用户信息主界面）
<?php
//1.连接数据库
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
//2.执行的操作
$stmt = $pdo->prepare('SELECT * FROM `user` LIMIT 1');
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
//3.关闭连接
$pdo = null;
//print_r($user);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户设置</title>
<style>
table,th,td {
border: 1px solid #666;
padding: 8px;
}
table {
border-collapse: collapse;
width: 80%;
text-align: center;
margin: 30px auto;
}
thead tr:first-of-type {
background-color: lightblue;
}
table > caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<caption>用户管理</caption>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><?=$user['id']?></td>
<td><?=$user['name']?></td>
<td><?=$user['email']?></td>
<td>
<button onclick="location.href='user_edit.php?id=<?=$user['id']?>'">编辑</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例（用户编辑界面）
<?php
//获取用户信息
//1.连接数据库
$id = intval(trim($_GET['id']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
//2.执行的操作
$stmt = $pdo->prepare("SELECT * FROM `user` WHERE `id`={$id}");
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
//3.关闭连接
$pdo = null;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
<!--以Ajax异步的方式与服务器进行数据交换-->
<script>
function save(form) {
//1.创建ajax对象
var request = new XMLHttpRequest();
//2.创建一个事件监听的回调
request.onreadystatechange = function (ev) {
//成功返回的信息
// console.log(request.responseText);
if(request.readyState === 4 && request.status === 200) {
//dom操作
var data = JSON.parse(request.responseText); //data是一个js对象
var tips = form.lastElementChild;
tips.innerHTML = data.message;
if(data.status === 1) {
tips.classList.add('success');
} else {
tips.classList.add('error');
}
//设置一个定时器，延时2秒后执行
setTimeout(function(){
history.back();
},2000);
}
}
//3.初始化参数
request.open('POST','user_manager.php?action=save',true);
//4.POST请求，设置请求头(如果是get方式提交就没有这一步，不用设置请求头)
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
//5.发送请求到服务器(要以键值对的方式发送)
var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
request.send(data);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例（用户编辑处理脚本）
<?php
//1.连接数据库
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$action = strtolower(trim($_GET['action']));
//echo $action;
switch($action) {
case 'save'://更新操作
$sql = 'UPDATE `user` SET `email`=:email, `password`=:password WHERE `id`=:id';
$stmt = $pdo->prepare($sql);
//过滤post参数
$email = strtolower(trim($_POST['email']));
$password = sha1(strtolower(trim($_POST['password'])));
$id = strtolower(trim($_POST['id']));
//参数绑定
$stmt->bindParam(':email',$email,PDO::PARAM_STR,60);
$stmt->bindParam(':password',$password,PDO::PARAM_STR,20);
$stmt->bindParam(':id',$id,PDO::PARAM_INT);
if($stmt->execute()===true) {
//更新成功
if($stmt->rowCount() === 1) {
$status = 1;
$message = '更新成功啦';
} elseif($stmt->rowCount() == 0) {
$status = 0;
$message = '没有更新';
}
} else {
//更新失败
// die(print_r($stmt->errorInfo()));
$status = -1;
$message = '更新失败，请检查';
}
echo json_encode(['status'=>$status, 'message'=>$message]);
exit;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
