性能简述

单击黄色的“cancel”按钮，批改状态 status 的值 toBeUsed 为 cancel，并将按钮换成红色的“delete”按钮）

 
 
其中，前端用 jquery 实现部分刷新；后端实现对数据库的操作（批改字段 status 的值为 cancel）

前端

button 标签的 html 代码

<button type="button" class="btn-warning" onclick="cancelReservation(this,{$eachreservation.reserveId})">
    cancel
</button>

 
 
 
 
html 文件中的 js 代码

<script>
    function cancelReservation(obj,reserveId){
        //---------- 可疏忽 ----------
        $(obj).prev().text("cancel");
        $(obj).removeAttr("class");
        $(obj).attr("class","btn-danger");
        $(obj).removeAttr("onclick");
        $(obj).attr("onclick","deleteReservation(this,{$eachreservation.reserveId})");
        $(obj).text("delete");



        //---------- 要害是上面这部分 ----------
        //ajax 申请服务器批改订单状态
        $.ajax({
            // 间接写办法则默认是以后控制器下的办法
            url:'cancelreservation',
            //url 全称
            //"{:url('index/Reservation/cancelreservation')}",
            type:'post',
            dataType:'json',
            data: {reserveId:reserveId,status:'cancel'},
            success:function(data){// alert('cancel succcess');
            }
        });
    }
</script>

后端

<?php
/**
 * Created by PhpStorm.
 * Date: 2021/3/20
 * Time: 19:37
 */

namespace app\index\controller;
use think\Controller;
use think\Request;
// 记得要引入 Request，否则参数 Request $request 无奈应用

class Reservation extends Controller
{
    // 勾销订单
    public function cancelreservation(Request $request)
    {if(empty(session('username'))){$this->error('login please','index/Login/login');
        }
    
        // 助手函数更新数据表中的数据 https://www.kancloud.cn/manual/thinkphp5/135178
        db('myorder')
            ->where('reserveId',$request->param('reserveId'))
            ->update(['status' => $request->param('status')]);
            //$request->param 外面是 ajax 传过来的键值对的 key
        return "success";
    }
}

参考文章

TP5(thinkPHP5) 框架基于 ajax 与后盾数据交互操作简略示例