为什么要用 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;}