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>

 
 
 
 

后端

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