javascript - 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

问题是因为当您单击 button 中的 i 时，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 错误，我建议在您的服务器端实现一些更严格的验证。