Thinkphp5与Ajax交互

UFO研究
• 阅读 1545

功能简述

单击黄色的“cancel”按钮,修改状态status的值toBeUsed为cancel,并将按钮换成红色的“delete”按钮)
Thinkphp5与Ajax交互

 
 
其中,前端用jquery实现局部刷新;后端实现对数据库的操作(修改字段status的值为cancel)

前端

button标签的html代码
Thinkphp5与Ajax交互

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

 
 
 
 
html文件中的js代码
Thinkphp5与Ajax交互

<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>

 
 
 
 

后端

Thinkphp5与Ajax交互

<?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与后台数据交互操作简单示例

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Wesley13 Wesley13
3年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
3年前
FD
!(https://oscimg.oschina.net/oscnet/27b94bba9f88488dba7d397aa3cc4f00.gif)
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
Oracle一张表中实现对一个字段不同值和总值的统计(多个count)
需求:统计WAIT\_ORDER表中的工单总数、未处理工单总数、已完成工单总数、未完成工单总数。表结构:为了举例子方便,WAIT\_ORDER表只有两个字段,分别是ID、STATUS,其中STATUS为工单的状态。1表示未处理,2表示已完成,3表示未完成总数。 SQL:  1.SELECT   2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
UFO研究
UFO研究
Lv1
我有故人抱剑去,斩尽春风未肯归。
文章
2
粉丝
0
获赞
0