Laravel 5.4:使用Ajax进行就地编辑

时间:2017-04-16 01:58:28

标签: ajax laravel-5

我当前拥有的页面显示了一个动态生成显示用户信息的行的表。每行都有一个“编辑”按钮,单击该按钮可将相应的单元格转换为输入,并将“编辑”按钮转换为“保存”按钮。单击该按钮时,该用户行的输入值应存储在数据库中。

我承认自己没有很多使用Ajax的经验,但我一直在网上看,我相信我正在遵循通过Ajax调用正确调用Controller函数的一般过程。但是,当我尝试测试时,我仍然遇到500错误。我相信可能是我如何获得请求并发送回复,但我不确定具体的错误。

我的代码包含如下:

home.blade.php

....
@foreach($users as $user)
    <tr id="row{{ loop->iteration }}>
        <input type='text' id='first_name_input_row{{ loop->iteration }}'>
        <input type='text' id='last_name_input_row{{ loop->iteration }}'>
        <input type="button" id="save_button_row{{ $loop->iteration }}" class="btn btn-btn-submit" value="Save" class="save" onclick="save_row('{{ $loop->iteration }}', {{ $user }})">
    </tr>
@endforeach
....
<script>
function save_row(num, user)
{

  var id = 'row' + num;

  $.ajax({
    method: 'post',
    url: '/update-table',
    data: {
      '_token': $('input[name=_token]').val(),
      'first_name': $('input[id=first_name_input_' + id + ']').val(),
      'last_name': $('input[id=last_name_input_' + id + ']').val(),
      'user': user
    },
    success: function(response){
      console.log("It worked!");
      console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("It failed!");
      console.log(jqXHR);
      console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }
  });

}
</script>

HomeController.php

public function updateTable(Users $users){

  $user = request()->input('employee');

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

  $users->editUser($user, $first_name, $last_name);

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

}

Users.php

public function editUser($user, $first_name, $last_name) {

  $user->first_name = $first_name;
  $user->last_name = $last_name;

  $user->save();

}

3 个答案:

答案 0 :(得分:0)

使用laravel资源控制器简单地创建CRUD。如果您正在更新,您需要方法PUT不发布。我不知道您的Ajax网址是否正常,但您可以使用SELECT * FROM `mychair` LEFT JOIN `mytable` ON mytable.Leg1 = mychair.Back1 UNION SELECT * FROM `mychair` RIGHT JOIN `mytable` ON mytable.Leg1 = mychair.Back1 WHERE mytable.Leg1 = 'A' ,其中user.update应该是控制器更新功能路由的名称。默认使用资源就是那个。

然后你可以在控制器里面做所有事情

{{ route('user.update') }}

答案 1 :(得分:0)

你的问题不是很清楚。您是否在表单中添加了<input name="_token" type="hidden" value="{{ csrf_token() }}">

Angus Simons关于PUT是正确的,你可能已经忘记了preventDefault()

&#13;
&#13;
function save_row(num, user)
{

  var id = 'row' + num;

  $.preventDefault();
  $.ajax({
    method: 'put',
    url: '{{ route('user.update') }},
    data: {
      '_token': $('input[name=_token]').val(),
      'first_name': $('input[id=first_name_input_' + id + ']').val(),
      'last_name': $('input[id=last_name_input_' + id + ']').val(),
      'user': user
    },
    success: function(response){
      console.log("It worked!");
      console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("It failed!");
      console.log(jqXHR);
      console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }
  });

}
&#13;
&#13;
&#13;

你的路线:

Route::put('user/update', 'homeController@updateTable')->route('user.update');

HomeController.php看起来很好。

答案 2 :(得分:0)

我最终设法找出了这个问题,这是由于我的一些变量中的简单拼写错误。我有点后悔把这个问题像我一样匆匆地做出来,而且我为基本上只要我这样做而道歉:

如果有人感兴趣,可以找到对此作品的一种“跟进”问题here