AJAX-запрос работает нормально, но когда я нажимаю на значок, который находится внутри кнопки, я получаю 500 внутренних ошибок сервера

Question

Я получаю внутреннюю ошибку сервера 500 ТОЛЬКО при нажатии на значок с изображением большого пальца, который находится внутри кнопки «Мне нравится»:

<button class="submit-btn like" id='{{ $image->id }}'>
    <i class="far fa-thumbs-up"></i> Like
</button>

Если я нажимаю в любом месте кнопки, запрос AJAX выполняетсяи тому подобное вставляется в базу данных, поэтому проблема определенно связана с иконкой.

Вот мой код JavaScript:

$('.like').on('click', function(event) {
        var imageId = event.target.id;

        $.ajax({
            method: 'POST',
            url: urlLike,
            data: {
                imageId: imageId,
                _token: token
            }
        }).done(function(response) {
            if ($('.like').hasClass('liked')) {
                $('.like').removeClass('liked');
                $('.like').html('<i class="far fa-thumbs-up"></i> Like');
            } else {
                $('.like').addClass('liked');
                $('.like').html('<i class="fas fa-check"></i> Liked');
            }
        });
    });

Answer 1

Проблема в том, что когда вы нажимаете i в button, на это указывает e.target.В свою очередь, он не имеет атрибута id, поэтому вы передаете пустое свойство логике на стороне сервера, что приводит к ошибке 500.

Чтобы исправить это, измените e.target на this (или e.currentTarget), поскольку jQuery гарантирует, что он будет выбранным вами элементом, а не дочерним элементом, вызвавшим событие.Попробуйте это:

$('.like').on('click', function(event) {
  var imageId = this.id;
  console.log(imageId);

  // your AJAX here...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="submit-btn like" id="{{ $image->id }}">
  <i class="far fa-thumbs-up">THUMBS UP</i> Like
</button>

Обратите внимание, что в этом примере при нажатии кнопки ссылка на элемент одинакова.

Кроме того, если отсутствиесвойство в запросе вызвало ошибку 500. Я бы предложил применить более строгую проверку на стороне вашего сервера.