Html+jQuery+PHP+MySQL 实现即点即改

1.写一个页面展示

2.要操作的就是“是否启用这一列”，给他一个 class

        ​​​​因为我是从后台获取数据后 循环遍历展示的 所有用 if 来判断 status 这个字段来展示“禁用”还是“启用”

 3.接下来就可以写 jQuery 的点击事件了

$('.statu').click(function () {
        //获取文本值
        let res = $(this).text();
        //先给他一个空
        let status = '';
        //获取这条数据的ID 后期修改时作为条件值
        let id = $(this).parent().siblings('.id').text();
        //判断一下文本值是什么 将 status 赋给相反的数字
        if (res=='启用'){
            status = 2;
        }else{
            status = 1;
        };
        //进行ajax请求后台
        $.ajax({
            // 请求的地址
            url: "{:url('test/Seek/updateOne')}",
            // 传过去数据
            data: {status,id},
            // 请求方式
            method: 'POST',
            // 成功后回调
            success: row=>{
                //修改成功后判断一下获取时的文本数据是什么，然后修改为相反的数据，替换掉即可
                if (row.code==200 && res=='启用'){
                    $(this).parent().html("<span class=\"label label-danger statu\">禁用</span>");
                }
                if (row.code==200 && res=='禁用'){
                    $(this).parent().html("<span class=\"label label-success statu\">启用</span>");
                }
            }
        })
    })

4.然后就是 PHP 后台的代码了

//控制器：
public function updateOne(){
        //获取数据
        $where['id'] = input('id');
        $data['status'] = input('status');
        //调模型层执行修改 返回提示信息
        $res = Technicals::updateOne($where,$data);
        if ($res){
            return json(['code'=>200,'data'=>'','msg'=>'修改成功']);
        }else{
            return json(['code'=>201,'data'=>'','msg'=>'修改失败']);
        }
    }

//模型层：
public static function updateOne($where,$data){
    return self::where($where)->update($data);
}

5.最后看一下效果如何（我用的是现成的模板，所以页面效果自行书写）