使用Ajax更新Laravel表单

Question

I'm trying to update data using ajax to prevent page reload. This is already populated form from the profile model. Even though this is pretty straightformward I am unable to submit this request via ajax.

This code gives me the following error :

Creating default object from empty value

Can anyone kindly help me understand what I have done incorrectly here?

blade file

<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>

Controller:

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:

<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

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