收藏
批改状态：合格
老师批语：
使用知识：
JSON
以前端JS进行ajax的POST请求为例，后端PHP处理请求为例：
1.前端构造一个JS对象，用于包装要传递的数据，然后将JS对象转化为JSON字符串，再发送请求到后端；
2.后端PHP接收到这个JSON字符串，将JSON字符串转化为PHP对象，然后处理请求。
相同的数据在这里有3种不同的表现形式，分别是前端的JS对象、传输的JSON字符串、后端的PHP对象
JS中与JSON相关的几个函数
1. 将JS数据结构转化为JSON字符串 —— JSON.stringify(value[, replacer [, space]])
JSON.stringify({"name":"Good Man","age":18})返回一个字符串 "{"name":"GoodMan","age":18}"
2. 将JSON字符串解析为JS数据结构 —— JSON.parse(text[, reviver])
3. 影响 JSON.stringify 的神奇函数 —— object.toJSON
如果你在一个JS对象上实现了toJSON方法，那么调用JSON.stringify去序列化这个JS对象时，JSON.stringify会把这个对象的toJSON方法返回的值作为参数去进行序列化。
AJAX请求：
同步与异步的根本区别在于；请求发出后，是否需要等待结果，必须等待结果就是同步，不用等待继续执行就是异步
Ajax技术核心是XMLHttpRequest对象
//GET请求
var request = new XMLHttpRequest(); //创建XHR对象可以直接实例化XMLHttpRequest
request.open('get', 'demo.php', false); //连接服务器
request.send(); //发送请求
request.onreadystatechange = function(){ //接受返回
if(request.readyState==4 && request.status==200){
//读取成功操作
}
}
//POST请求
// 1、创建ajax对象
var request = new XMLHttpRequest(); // 2、监听成功回调
request.onreadystatechange = function(ev){ // 成功返回的信息
if(request.readyState==4 && request.status==200){
frame.href="user_manager.php";
}
}
// 3、初始化参数
request.open('POST','user_manager.php?active=save'); // post 请求 需要设置一个请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded'); // post 请求发送请求到服务器
// 以键值对：
var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
request.send(data);open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步
open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么一共有四个属性：
接受响应之后，第一步检查status属性，以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志
使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：
代码：
按钮请求编辑：
<button onclick="location.href='user_edit.php?id=<?=$user['id'] ?>'" class="layui-btn layui-btn-normal layui-btn-xs"><i class='layui-icon layui-icon-edit'></i></button>
编辑页面：
<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO("mysql:host=127.0.0.1;dbname=staff;",'root','root');
$stmt = $pdo->prepare("select * from staff where id ={$id}");
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo = null;
?>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
<script src="static/js/jquery.js"></script>
<script src="static/layui/layui.all.js"></script>
<style>
.login{width:350px;margin:50px auto;}
.login h3{text-align:center;line-height:50px;font-size:24px;font-weight:bold;}
.success{color:#5FB878;}
.error{color:#FF5722;}
.notice{color:#FFB800;}
</style>
<div class='login'>
<h3>员工信息编辑</h3>
<form action="" class="layui-form" id='edit-form' name='user'>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="name" value="<?=$user['name']; ?>" readonly lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮 箱</label>
<div class="layui-input-inline">
<input type="email" name="email" value="<?=$user['email']; ?>" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电 话</label>
<div class="layui-input-inline">
<input type="text" name="mobile" value="<?=$user['mobile']; ?>" required lay-verify="required|number" placeholder="请输入电话" autocomplete="off" class="layui-input">
</div>
</div>
<input type="hidden" name='id' value="<?=$id ?>" />
<div class="layui-form-item">
<label class="layui-form-label"> </label>
<div class="layui-input-inline">
<button type="button" class="layui-btn" lay-submit lay-filter="formDemo">更新</button>
<button class="layui-btn layui-btn-primary" onclick='history.back();'>取消</button>
</div>
</div>
<h4 id='tips' class='success'></h4>
</form>
</div>
<script>
layui.use(['layer','form'], function(){
var form = layui.form;
form.render();
//监听提交
form.on('submit(formDemo)', function(data){
var form = data.form;
console.log(form);
// 以 ajax 异步方式与服务器进行数据交互
// 1、创建ajax对象
var request = new XMLHttpRequest();
// 2、监听成功回调
request.onreadystatechange = function(){
// 成功返回的信息
if(request.readyState===4 && request.status===200){
// console.log(request.responseText);
// request.responseText === $_POST 响应返回的信息 是user_manager.php 文件内容
var data = JSON.parse(request.responseText); // JSON.parse 将服务器传输的信息转为json对象
var tips = form.lastElementChild;
tips.innerHTML = data.message;
if(data.status === 1){
tips.classList.add('success');
}else{
tips.classList.add('error');
}
setTimeout(function() {
history.back();
}, 2000);
}
}
// 3、初始化参数
request.open('POST','check.php?action=update');
// post 请求 需要设置一个请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 发送请求到服务器
// 以键值对：
var data = 'email='+form.email.value+'&mobile='+form.mobile.value+'&id='+form.id.value;
request.send(data);
});
});
</script>
请求检查：
<?php
// 用户管理操作 不是界面
$pdo = new PDO('mysql:host=127.0.0.1;dbname=staff;','root','root');
$action = strtolower(trim($_REQUEST['action']));
session_start();
// 返回json格式数据 ['status'=>1,'msg'=>'lll']
$status = 0;
$message = '';
switch ($action){
case 'update':
$stmt = $pdo->prepare("UPDATE `staff` SET `email` = :email,`mobile` = :mobile WHERE id = :id");
$email = strtolower(trim($_POST['email']));
$mobile = intval(trim($_POST['mobile']));
$id = $id = intval(trim($_POST['id']));
$stmt->bindParam('email',$email,PDO::PARAM_STR,60);
$stmt->bindParam('mobile',$mobile,PDO::PARAM_INT);
$stmt->bindParam('id',$id,PDO::PARAM_INT);
if($stmt->execute()){
// 更新成功
if($stmt->rowCount() === 1){
$status = 1;
$message = '更新成功';
}else if($stmt->rowCount() === 0){
$status = 0;
$message = '没有更新';
}
}else{
// 上线后 下面这句话 应删除
// die(print_r($stmt->errorInfo())); //开发时使用
$status = -1;
$message = '保存失败，请检查';
}
exit(json_encode(['status'=>$status,'message'=>$message])); // 将信息返回给前台
break;
case 'add':
$sql = "INSERT INTO staff(`name`,`age`,`sex`,`salary`,`position`,`email`,`hiredate`) VALUES(:name,:age,:sex,:salary,:position,:email,:hiredate)";
$stmt = $pdo->prepare($sql);
$name = trim($_POST['name']);
$age = trim($_POST['age']);
$sex = trim($_POST['sex']);
$salary = trim($_POST['salary']);
$position = trim($_POST['position']);
$email = trim($_POST['email']);
$hiredate = time();
$stmt->bindValue('name',$name,PDO::PARAM_STR);
$stmt->bindValue('age',$age,PDO::PARAM_INT);
$stmt->bindValue('sex',$sex,PDO::PARAM_INT);
$stmt->bindValue('salary',$salary,PDO::PARAM_INT);
$stmt->bindValue('position',$position,PDO::PARAM_STR);
$stmt->bindValue('email',$email,PDO::PARAM_STR);
$stmt->bindValue('hiredate',$hiredate,PDO::PARAM_INT);
if ($stmt->execute()){
if ($stmt->rowCount() === 1){
$status = 1;
$message = '新增成功';
}else if($stmt->rowCount() === 0){
$status = 0;
$message = '没有记录新增';
}
}else{
$status = -1;
$message = '新增失败，请检查';
}
exit(json_encode(['status'=>$status,'message'=>$message])); // 将信息返回给前台
break;
case 'del':
$id = trim($_POST['id']);
$sql = "UPDATE `staff` SET `delete_time` = :delete_time WHERE id = :id";
$stmt = $pdo->prepare($sql);
if ($stmt->execute(['delete_time'=>time(),'id'=>$id])){
if ($stmt->rowCount() == 1){
$status = 1;
$message = '删除成功';
}elseif ($stmt->rowCount() == 0){
$status = 0;
$message = '没有记录删除';
}
}else{
$message = '删除失败，请检查';
}
exit(json_encode(['status'=>$status,'message'=>$message])); // 将信息返回给前台
break;
}效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
