状态即点即改与删除

最新推荐文章于 2025-05-20 18:28:23 发布

Sun L

最新推荐文章于 2025-05-20 18:28:23 发布

阅读量107

点赞数

分类专栏： php

本文链接：https://blog.youkuaiyun.com/weixin_51095543/article/details/115668532

版权

php 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在Laravel框架中通过AJAX实现实时数据修改，包括HTML元素的交互设计、JavaScript的AJAX请求处理以及后端控制器的响应处理，展示了前后端协作实现快速数据更新的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本示例代码是在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'=>'修改成功'];

    }