ThinkPhp6、Laravel框架使用Ajax来完成无刷新即点即改操作
2022-11-24 11:10:29
213
{{single.collect_count}}

为什么要用 Ajax 来实现即点即改操作:

因为使用 Ajax 可以进行页面无刷新并进行修改的操作,在某种意义上也算是前后端分离

(此篇文档的即点即改不够完善,大佬勿喷)

                       完整代码在最下方,截图代码方便分析

第一步:

首先使用 class 起一个名称,并使用 id 进行赋值

class 用来进行设置点击事件,id 用来取当前点击内容的 id 

第二步:

使用 JS 设置点击事件并且接收 id 

第三步:

进行书写 Ajax

 url 是控制器的位置

 type 是传值方式

 dataType 是接收值方式

 data 是传值内容

第四步:

到控制器接收 id 并且实例化对象

 第五步:

到达模型层进行 find 查找所有值,并且进行判断是否相同

 第六步:

到模型层进行判断成功或者失败,返回 josn 的数据和结果

 第七步:

Ajax 进行判断并进行赋值

这样的话就可以完成即点即改了,不过这只限制于只有两个数值,当有三个或者三个以上此方法便无法使用,因为这个方法并不怎么规范,模型层尽量减少 if 的判断,此方法只是思路清晰,方法能够使你有新的方法

                                       完整代码如下

<td class="states" id="{$val.id}">{$val.stateTo}</td>JS代码<script>$(".states").click(function (){var _this = $(this);var id = _this.prop('id');$.ajax({url:'states',type:'get',dataType:'json',data:{id:id},success:function (e){// 打印返回的json数据console.log(e);// 判断if(e.code == 600){// 将text的内容进行更改 _this.text(e.data);} _this.text(e.data);}});});</script>控制器代码 public function states(){$id = $_GET["id"];$obj = new user();$res = $obj->states($id);if($res){return json([//返回成功数据 'code'=>'600',// 告知返回成功 'msg'=>'成功',// 并进行传值 'data'=>'小狸猫',]);}else{return json(['code'=>'400','msg'=>'成功','data'=>'小狐狸',]);}}模型层代码 public function states($id){//接收到所有值$obj = $this->find($id);//进行判断if($obj->state == '小狐狸'){//判断成功,进行赋值$obj->state = '小狸猫';//直接修改$obj->save();//返回ture的值return true;}//判断失败$obj->state = '小狐狸';//进行赋值$obj->save();//返回false的值return false;}

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}