【问题标题】:ajax in laravel for create and updatelaravel 中的 ajax 用于创建和更新
【发布时间】:2021-03-10 10:28:10
【问题描述】:

我在 laravel 中使用 ajax 作为 crud。更新或添加数据时,向列表添加新行但返回字符串“未定义”,刷新此页面时显示真实文本。
如何解决此问题?

控制器:

public function update(Request $request, $user_id)
{
        $user = User::where('id', $user_id)->update([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'password' => Hash::make($request->input('password')),
        ]);

        if ($request->input('role') == 'admin'){
            $user = DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 2,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        } else {
            $user = DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 1,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        }

        return response()->json($user);
}

查看:

@foreach ($users as $user)
    <tr id="user{{$user->id}}" class="active">
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{ $user->hasRole('admin') ? 'Admin' : 'Author' }}</td>
        <td width="35%">
            <button class="btn btn-warning btn-detail open_modal" value="{{$user->id}}"> Edit </button>
            <button class="btn btn-danger btn-delete delete-user" value="{{$user->id}}"> Delete </button>
        </td>
    </tr>
@endforeach

ajax 的 js 代码

$(document).ready(function(){


    //get base URL *********************
    var url = $('#url').val();


    //display modal form for creating new user *********************
    $('#btn_add').click(function(){
        $('#btn-save').val("add");
        $('#frmusers').trigger("reset");
        $('#myModal').modal('show');
    });



    //display modal form for user EDIT ***************************
    $(document).on('click','.open_modal',function(){
        var user_id = $(this).val();

        // Populate Data in Edit Modal Form
        $.ajax({
            type: "GET",
            url: url + '/' + user_id,
            success: function (data) {
                console.log(data);
                $('#user_id').val(data.id);
                $('#name').val(data.name);
                $('#password').val(data.password);
                $('#email').val(data.email);
                $('#btn-save').val("update");
                $('#myModal').modal('show');
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });



    //create new user / update existing user ***************************
    $("#btn-save").click(function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })

        e.preventDefault();
        var formData = {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val(),
            role: $('#role').val(),
        }

        //used to determine the http verb to use [add=POST], [update=PUT]
        var state = $('#btn-save').val();
        var type = "POST"; //for creating new resource
        var user_id = $('#user_id').val();;
        var my_url = url;
        if (state == "update"){
            type = "PUT"; //for updating existing resource
            my_url += '/' + user_id;
        }
        console.log(formData);
        $.ajax({
            type: type,
            url: my_url,
            data: formData,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                var user = '<tr id="user' + data.id + '"><td>' + data.name + '</td><td>' + data.email + '</td><td>' + data.role + '</td>';
                user += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '">ویرایش</button>';
                user += ' <button class="btn btn-danger btn-delete delete-user" value="' + data.id + '">حذف</button></td></tr>';
                if (state == "add"){ //if user added a new record
                    $("#users-list").append(user);
                }else{ //if user updated an existing record
                    $("#user" + user_id).replaceWith( user );
                }
                $('#frmusers').trigger("reset");
                $('#myModal').modal('hide')
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });


    //delete user and remove it from TABLE list ***************************
    $(document).on('click','.delete-user',function(){
        var user_id = $(this).val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        $.ajax({
            type: "DELETE",
            url: url + '/' + user_id,
            success: function (data) {
                console.log(data);
                $("#user" + user_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });

});

.................................................. ..................................................... ..................................................... ................................................

【问题讨论】:

  • 更新方法返回布尔值,所以基本上在所有 3 个块中,您将 $user 设置为布尔值而不是对象
  • 解决办法是什么?
  • 在下面查看我的答案

标签: javascript php ajax laravel crud


【解决方案1】:

更新方法返回布尔值,因此基本上在所有 3 个块中,您将 $user 设置为布尔值而不是对象。

所以利用 tap() 函数

public function update(Request $request, $user_id)
{
    $user = tap(User::where('id', $user_id)->first())
        ->update([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'password' => Hash::make($request->input('password')),
        ]);

        if ($request->input('role') == 'admin'){
            DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 2,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        } else {
            DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 1,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        }

    //Or you can fetch the user record again User::find($user_id);
    //if you are not using tap()

    return response()->json($user->fresh());
}

【讨论】:

    【解决方案2】:

    如何在store方法中解决这个问题?

    public function store(Request $request)
    {
        $userAuth = auth()->user();
        if($userAuth->hasRole('admin')){
            $user = User::insertGetId([
                'name' => $request->input('name'),
                'email' => $request->input('email'),
                'password' => Hash::make($request->input('password')),
            ]);
    
            if ($request->input('role') == 'admin'){
                $user = DB::table('model_has_roles')->insert([
                    'role_id' => 2,
                    'model_type' => 'App\User',
                    'model_id' => $user,
                ]);
            } else {
                $user = DB::table('model_has_roles')->insert([
                    'role_id' => 1,
                    'model_type' => 'App\User',
                    'model_id' => $user,
                ]);
            }
            return response()->json($user);
        }
    

    【讨论】:

      猜你喜欢
      • 2013-09-21
      • 1970-01-01
      • 2022-01-11
      • 2021-04-02
      • 1970-01-01
      • 2015-09-27
      • 1970-01-01
      • 2011-03-24
      • 2016-03-02
      相关资源
      最近更新 更多