使用 Ajax 更新 Laravel 表单

Question

我正在尝试使用 ajax 更新数据以防止页面重新加载。这已经从配置文件模型中填充了。尽管这很简单，但我无法通过 ajax 提交此请求。

这段代码给了我以下错误：

从空值创建默认对象

谁能帮我理解我在这里做错了什么？

刀片文件

<form class="form-horizontal" id="editProfile" data-parsley-validate>
  @method('PUT')
  @csrf

  <div class="row">
      <div class="col-md" style="padding:0px;">
          <input type="hidden" name="usr_id" id="usr_id">
          <input type="hidden" name="user_id" id="user_id" value="{{ $profile->user_id }}">
          <input type="hidden" name="username" id="username" value="{{ $profile->username }}">
          <input type="hidden" name="emp_id" id="emp_id" value="{{ $profile->emp_id }}">
          <input type="hidden" name="site" id="site" value="{{ $profile->site }}">

      <div class="form-group">
          <label for="firstname" class="col-sm-4 control-label">First Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="first_name" value="{{$profile->first_name}}" placeholder="First Name">
          </div>
      </div>

      <div class="form-group">
          <label for="lastname" class="col-sm-4 control-label">Last Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="last_name" value="{{$profile->last_name}}" placeholder="Last Name">
          </div>
      </div>

 <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="submit" value="submit" class="btn btn-danger">Update</button>
</div>
</div>
    </div>
   </div>
</form>

控制器：

public function update(Request $request, $usr_id)
{
   $profile = Profile::find($usr_id);

   $profile->first_name = $request->input('first_name');
   $profile->last_name = $request->input('last_name');
   $profile->update();
}

Ajax 脚本：

<script>
    $(document).ready(function() {
    // Update Data

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#editProfile').on('submit', function(e){
            e.preventDefault();

            var usr_id = $('#emp_id').val();

            $.ajax({
                type: "PUT",
                url: "/profile/edit/" + usr_id,
                dataType: $('#editProfile').serialize(),
                success: function (response) {
                    console.log(response);
                    alert("Data Updated");
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                }
            });
        });

    });

</script>

路线

Route::put('/profile/edit/{usr_id}', 'ProfileController@update')->name('profile.update');

Answer 1

从空值创建默认对象

这个错误是由这段代码引起的

$profile->update();

您正在尝试更新一个空对象，因为

$profile = Profile::find($usr_id);

返回null

因为find 接受一个整数的主键，而你传递给它的是一个空值（假设这就是你所说的emp_id）

这是验证 ID 是否存在的代码

<meta name="csrf-token" content="{{ csrf_token() }}">
<form class="form-horizontal" id="editProfile" data-parsley-validate>
    @method('PUT')
    <div class="row">
        <div class="col-md" style="padding:0px;">
            <input type="hidden" name="usr_id" id="usr_id">
            <input type="hidden" name="emp_id" id="emp_id" value="{{ $profile->emp_id }}">
        </div>
    </div>
    <button type="submit" id="submit" value="submit" class="btn btn-danger">Update</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

为了简洁省略不相关的部分

并在分派 Ajax 请求之前验证值

    $(document).ready(function() {
    // Update Data

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#editProfile').on('submit', function(e){
            e.preventDefault();

            var usr_id = $('#emp_id').val();

            if (usr_id < 1) {
                alert("Error: user id is null! make sure it has a value from the {{ $profile->emp_id }}");
                return;
            }

            $.ajax({
                type: "PUT",
                url: "/profile/edit/" + usr_id,
                dataType: $('#editProfile').serialize(),
                success: function (response) {
                    console.log(response);
                    alert("Data Updated");
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                }
            });
        });

    });

在你的 update 函数中死掉并使用 dd 通过路由转储传递的 id

public function update(Request $request, $usr_id)
{
        // dd($usr_id);
   $profile = Profile::find($usr_id);

   $profile->first_name = $request->input('first_name');
   $profile->last_name = $request->input('last_name');
   $profile->update();
}

检查您是否从表单中收到了有效的 ID

希望对你有帮助