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