即点即改效果

 本示例代码是在laravel框架中进行操作的，使用ajax将修改后的数据发送到后端实现即点即改的效果

 

html代码示例

要修改的那行数据

 <td><span>{{$val->username}}</span><input type="text" class="input-text" value="{{$val->username}}" style="display: none" where="{{$val->id}}"></td>

 

script里面的代码

<script>
    //生成一个token与csrf
    const _token="{{csrf_token()}}"
    $(function () {


        $('td span').click(function () {
            // 把自己隐藏起来
            $(this).hide();
            // 让后面的文本框显示出来
            $(this).next('input').show();
            // 让文本框自动获取焦点
            $(this).next('input').focus();
            // 把自己的值放入文本框中
            $(this).next('input').val($(this).html());
        })

        $('td input[type="text"]').blur(function () {
            // 让自己隐藏
            $(this).hide();
            // 让span标签显示出来
            $(this).prev().show();
            // 获取当前的值
            let username=$(this).val()
            // 取出原来的值
            let val=$(this).prev().html()
            // 获取当前的用户ID
            let id=$(this).attr('where');
            // 判断值是否被修改过
            if(username!==val){
                // 发送ajax
                $.ajax({
                    type:'PUT',
                    url:"{{route('admin.user.username')}}",
                    data:{
                        username:username,
                        id:id,
                        _token
                    },
                }).then(({msg,code})=>{
                    if(code==200){
                        layer.msg('修改成功！！', {time:1000,icon: 1},()=>{
                            $(this).prev().html(username)
                        });
                    }
                })
            }
        })

    })
</script>

后端控制器代码

    //即点即改
    public function username(Request $request)
    {
        $id=$request->get('id');
        $username=$request->get('username');
        User::where('id',$id)->update(['username'=>$username]);
        return ['code'=>200,'msg'=>'修改成功'];

    }