Запрос AJAX работает нормально, но когда я нажимаю значок внутри кнопки, я получаю внутреннюю ошибку сервера 500
Я получаю внутреннюю ошибку сервера 500 ТОЛЬКО при нажатии на значок с изображением большого пальца, который находится внутри кнопки Like:
<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');
}
});
});
Что происходит на стороне сервера, когда вы используете post, imageId и token? В вашем журнале ошибок на стороне сервера должна быть соответствующая запись об ошибке. Проверьте это и обновите свой вопрос, чтобы получить соответствующий ответ.
Я просто догадываюсь, но может ли быть, что к внутреннему <i> прикреплено какое-то другое событие?
Вы действительно имели в виду currentTarget? Возможно, вы отправляете сообщения с <i>, на котором нет id.
После изменения цели на currentTarget я больше не получаю ошибку. Я предполагаю, что я пытался установить var imageId в JavaScript на идентификатор <i>, когда я щелкал по нему, что означало, что я отправлял пустой imageId в серверную часть. Спасибо. Не стесняйтесь размещать его в качестве ответа, чтобы я мог выбрать его как правильный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что когда вы щелкаете i внутри button, e.target указывает именно на это. В свою очередь, у него нет атрибута id, поэтому вы передаете пустое свойство в логику на стороне сервера, что вызывает ошибку 500.
Чтобы исправить это, измените e.target на this (или e.currentTarget), поскольку jQuery гарантирует, что это будет выбранный вами элемент, а не дочерний элемент, вызвавший событие. Попробуй это:
$('.like').on('click', function(event) {
var imageId = this.id;
console.info(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, я бы предложил реализовать более строгую проверку на стороне вашего сервера.
Если вы получаете ошибку 500, что-то, что вы отправляете на свой бэкэнд, неверно. Серверная часть не может понять, что вы отправляете, или не знает, как это обработать. Возможно, вам захочется убедиться, что вы отправляете и что видит ваш сервер.