步骤
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' => '修改失败',
];
}
}