Thinkphp5与Ajax交互

功能简述

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