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错误，我建议您在服务器端实施更严格的验证。

AJAX请求工作正常，但是当我单击按钮内的图标时，出现500内部服务器错误

1 个答案: