性能简述

单击黄色的“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与后盾数据交互操作简略示例