ThinkPhp6、Laravel框架使用Ajax来完成无刷新即点即改操作

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