Question

嘿大家我在laravel 5.4中用ajax编辑评论有问题

这适用于模态＆＃34;按下编辑和模态打开＆＃34;所以问题是当你点击编辑＆＃34; editar＆＃34;我得到500（内部服务器错误）

首先，我将向您展示我的js代码：

＆＃13;

$(document).ready(function(){

var commentId = 0;
    var divcomment = null;

    $('.edit-comment').click(function(event){
      event.preventDefault();
      var divcomment = this.parentNode.parentNode;
      commentId = event.target.parentNode.parentNode.dataset['commentid'];
      var commentBody = $(divcomment).find('#display-comment').text();
      $('#comment-body').val(commentBody);
      $('#edit-comment').modal();
    });

    $('#modal-save').click(function(){
        $.ajax({
            method: 'PUT',
            url: urlEdit,
            data: {comment: $('#comment-body').val(), commentId: commentId, _token: token}
        })
        .done(function (msg){
            $(divcomment).text(msg['new_comment']);
            $('#edit-comment').modal('hide');
        });
    });

});

＆＃13;

我的评论控制器，更新功能：

    public function update(Request $request)
{

    $this->validate($request, [
        'comment' => 'required'
    ]);
    $comment = Comment::find($request['commentId']);
    if (Auth::user() != $comment->user) {
        return redirect()->back();
    }
    $comment->comment = $request['comment'];
    $comment->update();
    return response()->json(['new_comment' => $comment->comment], 200);

}

我为url创建了一个var：urlEdit，在我的视图中，所以这里是我的观点：

＆＃13;

<article class="row">
                        <div class="col-md-3 col-sm-3 hidden-xs">
                          <figure class="thumbnail">
                            <img class="img-responsive" src="/uploads/avatars/{{ $comment->user->profilepic  }}" />
                            <figcaption class="text-center">{{ $comment->user->name }}</figcaption>
                          </figure>
                        </div>
                        <div class="col-md-8 col-sm-8">
                          <div class="panel panel-default arrow left">
                            <div class="panel-body">
                              <header class="text-left">
                                <div class="comment-user"><i class="fa fa-user"></i> {{ $comment->user->name }}</div>
                                <time class="comment-date" datetime="{{ $comment->created_at->diffForHumans() }}"><i class="fa fa-clock-o"></i> {{ $comment->created_at->diffForHumans() }}</time>
                              </header>
                              <div id="comment-post" data-commentid="{{ $comment->id }}">
                                  <p id="display-comment">{{ $comment->comment }}</p>
                              </div>
                            </div>

                            <div class="panel-footer list-inline comment-footer">
                              @if(Auth::guest())

                              No puedes responder ningún comentario si no has ingresado.

                              @else

                              @if(Auth::user() == $comment->user)
                                <a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a> <a href="#" data-toggle="modal" data-target="delete-comment" class="delete-comment">Eliminar</a>
                              @endif

                              @if(Auth::user() != $comment->user)
                                <a href="#">Responder</a>        
                              @endif

                              @endif
                            </div>

                          </div>
                        </div>
                      </article>

＆＃13;

这是模式：

＆＃13;

<div class="modal fade" id="edit-comment" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="color:#000;">Editar Comentario</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="comment">Editar comentario</label>
            <textarea class="form-control" name="comment" id="comment"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-comment-dismiss btn-comment-modal" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cerrar</button>
        <button type="button" class="btn-comment-edit btn-comment-modal" id="modal-save"><span class="glyphicon glyphicon-ok"></span> Editar</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

当然是在foreach循环中。

我在观点上做了两个变种：

＆＃13;

    <script>
    $(document).ready(function(){
     var token = '{{ Session::token() }}';
     var urlEdit = '{{ url('comments/update') }}';
    });
    </script>

＆＃13;

最后是截图：
https://www.domain.ru

提前谢谢。

Answer 1

您的代码存在一些问题。首先;您的变量commentId在您的ajax请求时不存在，因此当在php端调用控制器时它不存在。由于您使用的是jQuery，因此可以轻松修复。

你的js和js之间的主要区别在于我已经取代了你的

commentId = event.target.parentNode.parentNode.dataset['commentid'];

与

commentId = $("#comment-post", event.target.parentNode.parentNode).data('commentid');

因为你正在使用jQuery。

上述行相当于$(event.target.parentNode.parentNode).find('#comment-post').data('commentId');

值得注意的是，我已经注释掉了ajax请求;主要问题是commentId不存在;有了上述改变，现在就可以了。

$(document).ready(function() {

  var commentId = 0;
  var divcomment = null;

  $('.edit-comment').click(function(event) {
    event.preventDefault();
    var divcomment = this.parentNode.parentNode;
    commentId = $("#comment-post", event.target.parentNode.parentNode).data('commentid');
    var commentBody = $(divcomment).find('#display-comment').text();
    $('#comment-body').val(commentBody);
    $('#edit-comment').modal();
  });

  $('#modal-save').click(function() {
    /*$.ajax({
        method: 'PUT',
        url: urlEdit,
        data: {
          comment: $('#comment').val(),
          commentId: commentId,
          _token: token
        }
      })
      .done(function(msg) {
        $(divcomment).text(msg['new_comment']);
        $('#edit-comment').modal('hide');
      });*/
    console.log("comment id: " + commentId + " comment: " + $('#comment-body').val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="edit-comment" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="color:#000;">Editar Comentario</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="comment">Editar comentario</label>
            <textarea class="form-control" name="comment" id="comment"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-comment-dismiss btn-comment-modal" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cerrar</button>
        <button type="button" class="btn-comment-edit btn-comment-modal" id="modal-save"><span class="glyphicon glyphicon-ok"></span> Editar</button>
      </div>
    </div>
  </div>
</div>
<article class="row">
  <div class="col-md-3 col-sm-3 hidden-xs">
    <figure class="thumbnail">
      <img class="img-responsive" src="http://placehold.it/200x200" />
      <figcaption class="text-center">User1</figcaption>
    </figure>
  </div>
  <div class="col-md-8 col-sm-8">
    <div class="panel panel-default arrow left">
      <div class="panel-body">
        <header class="text-left">
          <div class="comment-user"><i class="fa fa-user"></i>User1</div>
          <time class="comment-date" datetime="1 hour ago"><i class="fa fa-clock-o"></i>1 hour ago</time>
        </header>
        <div id="comment-post" data-commentid="1">
          <p id="display-comment">blah blah</p>
        </div>
      </div>

      <div class="panel-footer list-inline comment-footer">
        <a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a> <a href="#" data-toggle="modal" data-target="delete-comment" class="delete-comment">Eliminar</a>
      </div>
    </div>
  </div>
</article>

现在，除此之外，我还不完全确定浏览器是否支持PUT方法，因此，可能需要将其作为属性添加到您在ajax中发送的数据数组中请求，以及将ajax方法更改为POST，如下所示：

$.ajax({
  method: 'POST',
  url: urlEdit,
  data: {
    comment: $('#comment').val(),
    commentId: commentId,
    _token: token,
    _method: 'PUT'
  }
})
.done(function(msg) {
  $(divcomment).text(msg['new_comment']);
  $('#edit-comment').modal('hide');
});

最后，在Laravel方面，您的代码看起来很好，但您可能需要一种更好的方法来将经过身份验证的用户与登录用户进行比较。

值得注意;您正在验证控制器更新方法中是否存在comment请求变量。因此，如果变量为空或空字符串，验证程序将抛出错误。在我能够提供这方面的任何代码之前，我必须具体检查验证器的工作原理。

<强>更新：事实证明，在你的ajax中你有以下几点：

comment: $('#comment-body').val(),

这不是你给那个textarea的id。您提供的ID为comment，换句话说，您的代码应为：

comment: $('#comment').val(),

我已经更新了上面的例子来反映这种变化。

Answer 2

您正在从控制器返回json响应，因此在您的ajax中添加dataType:'json'。检查你的路线文件中的路线。它必须是资源类型或put类型才能接受put请求

Route::resource($uri, $callback);

或

Route::put($uri, $callback);

由于HTML表单只支持POST和GET，因此将自动在表单中添加_method隐藏字段来欺骗PUT和DELETE方法

<input name="_method" type="hidden" value="PUT">

Answer 3

这应该解决它，我假设您正在使用最新版本的laravel

public function update(Request $request)
{

    $this->validate($request, [
        'comment' => 'required'
    ]);

    if (! $comment = Comment::find($request->get('commentId'))) {
        // Comment not found.
        return redirect()->back();
    }

    if (Auth::user()->id != $comment->user->id) {
        return redirect()->back();
    }

    $comment = tap($comment)->update([
        'comment' => $request->get('comment'),
    ]);

    return response()->json(['new_comment' => $comment->comment], 200);

}

ps：所有响应类型应该相同。

500（内部服务器错误）ajax和laravel

3 个答案: