laravel实现ajax无刷新状态修改

步骤

1、点击获取事件内容，发送ajax请求
2、响应成功后修改元素展示属性值与文本内容

实现代码

前端html与jquery部分

<td>
   @if ($item->status == 0)
       <span class="layui-badge layui-bg-red" style="cursor:pointer" onclick="status(this,{{$item->id}},0)">下架</span>
   @else
       <span class="layui-badge layui-bg-green" style="cursor:pointer" onclick="status(this,{{$item->id}},1)">上架</span>
   @endif
</td>

<script type="text/javascript">
        //ajax修改状态
        function status(obj,id,status){
            if(status){
                $.post("{{route('article-status')}}",{id:id,"_token": "{{csrf_token()}}","status":"0"},function(backdata){
                    if (backdata.code == 200) {
                        $(obj).attr("onclick",'status(this,'+id+',0)');
                        $(obj).attr("class","layui-badge layui-bg-red");
                        $(obj).text("下架");
                    } else {
                        layer.msg('修改失败', {
                            icon: 5
                        });
                    }
                },"json");
            }else{
                $.post("{{route('article-status')}}",{id:id,"_token": "{{csrf_token()}}","status":"1"},function(backdata){
                    if (backdata.code == 200) {
                        $(obj).attr("onclick",'status(this,'+id+',1)');
                        $(obj).attr("class","layui-badge layui-bg-green");
                        $(obj).text("上架");
                    } else {
                        layer.msg('修改失败', {
                            icon: 5
                        });
                    }
                },"json");
            }
        }
    </script>

php处理前端请求逻辑

  /**
     * 修改资讯状态
     */
    public function updateStatusArticle(Request $request)
    {
        //剔除数据
        $arr = $request->except("_token");
        $ret = ArticleModel::where(['id' => $arr['id'], 'is_delete' => 0])->update($arr);
        if($ret) {
            return [
                'code' => 200,
                'data' => [],
                'msg' => '修改成功',
            ];
        }else{
            return [
                'code' => 500,
                'msg' => '修改失败',
            ];
        }
    }