Как добавить комментарий на страницу с помощью ajax

Question

Я пытаюсь разрешить пользователю оставлять комментарии в статье, но каким-то образом, чтобы моя страница не перезагружалась, я должен использовать ajax, и у меня нет особых знаний об этом. Вот так выглядит мой раздел комментариев:

<div class="usrcmmnt_list">
      @foreach($comments as $comment)
      <div class="usrcmmnt flex_box">
        <div class="usrcmmnt_pic">
          <img src="{{ $comment->user['profile_image'] }}">
        </div>
        <div class="usrcmmnt_area">
          <p class="usrcmmnt_name">{{ $comment->user['name'] }}</p>
          <div class="usrcmmnt_box">
            <p class="usrcmmnt_text">{{$comment['content']}}</p>
            <p class="usrcmmnt_time"><img src="{{ url('/img/icon_time.png') }}">{{ date("m/d H:m", strtotime($comment->created_at)) }}</p>
          </div>
        </div>
      </div>
      @endforeach
    </div>
    <div class="comment_write">
      <textarea placeholder="Write a comment" name="comment" id="comment" maxLength="255"></textarea>
      <p class="usrcmmnt_text" id="textarea_warning"></p>
      <span class="alert"></span>
      <button class="btn btn_orange btn_m_2" id="saveComment" type="submit">Post comment</button>
    </div>
</div>

В моей части сценария у меня есть эта, но она только копирует существующие комментарии. Это только для моего тестирования:

$('.comment_write button').on('click', function(e){
  e.preventDefault();
  var tmp = document.createElement('div');
  $(tmp).load('myurl', function(data){
    // usrcmmnt_list
    var tmp2 = document.createElement('div');
    $(tmp2).html(data);
    var list = $(tmp2).find('.usrcmmnt_list');

    $(".usrcmmnt_list").append(list);
  });
});

Как мне достичь своей цели с помощью ajax?

Answer 1

Для этого существует несколько подходов, один из них:

• Вы можете переместить цикл комментариев (@foreach) в частичный
• создать конечную точку для сохранения комментария пользователя и вернуть частичные новые комментарии в виде html
• обновить DOM

1. Создайте новый фрагмент \resources\views\partials\comments.blade.php и включите его в раздел комментариев:

   @if ($comments)
    @foreach($comments as $comment)
          <div class="usrcmmnt flex_box">
            <div class="usrcmmnt_pic">
              <img src="{{ $comment->user['profile_image'] }}">
            </div>
            <div class="usrcmmnt_area">
              <p class="usrcmmnt_name">{{ $comment->user['name'] }}</p>
              <div class="usrcmmnt_box">
                <p class="usrcmmnt_text">{{$comment['content']}}</p>
                <p class="usrcmmnt_time"><img src="{{ url('/img/icon_time.png') }}">{{ date("m/d H:m", strtotime($comment->created_at)) }}</p>
              </div>
            </div>
          </div>
          @endforeach
    @else
    No comments
    @endif

2. Ваш раздел комментариев должен выглядеть следующим образом:

<div class="usrcmmnt_list">
    <div id="comments-list">
    @include('partials.comments')
    </div>
    <div class="comment_write">
      <form method="post" action="{{ route('save.comment') }}" id="saveCommentForm">
      <textarea placeholder="Write a comment" name="comment" id="comment" maxLength="255"></textarea>
      <p class="usrcmmnt_text" id="textarea_warning"></p>
      <span class="alert"></span>
      <button class="btn btn_orange btn_m_2" id="saveComment" type="submit">Post comment</button>
      </form>
    </div>
</div>

3. Создайте свой метод сохранения комментария в CommentsController (который вы будете использовать для сохранения комментария пользователя с помощью вызова ajax):

public function save(Request $request)
{
    /* we assume that your ajax save route is named comment.save */
    /* you might need the postId if you save the comments for a post */
    $comment = $request->input('comment');
    $user    = auth()->user();
    $comment = Comment::create([
        'user_id'=> $user->id,
        'content'=> $comment
    ]);
    $comments = Comment::with('user')->all();
    return view('comments.blade');
}

4. Ваш вызов ajax:

$(document).ready(function(){
    $('#saveCommentForm').on('submit', function(event) {
        event.preventDefault(); // prevent the form from submiting
        var $form = $(this),
            url = $form.attr('action');

        $.ajax({
            url: url,
            method: 'POST', 
            data: $form.serialize(),
            success: function(response) {
                $('#comments-list').html(response); //update the dom
            },
            error: function() {
                alert('An error occurred. Please try again later.');
            }
        });
    });
});

Надеюсь, это поможет вам начать.

Answer 2

Вы должны попробовать что-то вроде этого.

$(document).on('click', '#saveComment', function(){
    if($('#comment').val()==''){
        alert('Please write a Comment First!');
    }
    else{
        var comment = $('#comment').val();
        $.ajax({
            type: 'POST',
            url: '<your url goes here>',
            data: {"comment": comment},
            success: function(){
               // update comment listing.
            },
        });
    }

});

Однако вот полный учебник, которому вы можете следовать. https://www.sourcecodester.com/tutorials/php/11819/laravel-comment-post-using-ajax.html