Question

我有一个AJAX按钮喜欢这篇文章，该按钮将JSON发送到RESTful API来执行我的所有后端代码。从我的疑难解答中，似乎AJAX按钮甚至没有向API发送POST请求，但是我可能错了。我已经尝试了一些方法来从AJAX请求中获取响应。.但是我的console.log中什么也没得到。

我正在关注YouTube教程系列，甚至尝试从GitHub复制和粘贴教程代码，但是console.log中仍然没有任何内容。

所以我的“喜欢”按钮有一个data-id字段，AJAX会监听该字段。该按钮的代码是...

<div><button class="btn btn-primary"  data-id="'+posts[index].PostID+'" type="button" id="InteractButt" style="background-image: url(&quot;assets/img/Thumbs%20Up.png&quot;);"></button> // Code for displaying amount

我的AJAX请求正在监听数据ID按钮...

<script type="text/javascript">
        $('[data-id]').click(function() {
             var buttonid = $(this).attr('data-id');
                $.ajax({
                        type: "POST",
                        url: "api/likes?id=" + $(this).attr('data-id'),
                        processData: false,
                        contentType: "application/json",
                        data: '',
                        success: function(r) {
                        var res = JSON.parse(r)
                        console.log(r)
                        // $("[data-id='"+buttonid+"']").html(' <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+res.Likes+' Likes</span>')
                       },
                        error: function(r) {
                        console.log(r)
                                            }
                        });
                    }); 
     </script>

我的API正在等待执行此代码；

        else if ($_GET['url'] == "likes") {
        $postId = $_GET['id'];
                $likerId = Login::isLoggedIn();
                // code to sort out liked.. then reply with the count in JSON
                echo "{";
                echo '"Likes":';
                echo $db->query('SELECT likes FROM posts WHERE id=:postid', array(':postid'=>$postId))[0]['likes'];
                echo "}";
        }

Answer 1

首先，向服务器发送POST请求会阻止您通过php中的GET访问查询字符串。只需将您的类型更改为GET就可以了，如果还行，那就将内容类型更改为“ application / x-www-form-urlencoded”，而不是“ application / json”：

<script type="text/javascript">
    $('#InteractButt').click(function() {
         // console.log('hello'); just to make sure somethin happens when you click...
         var buttonid = $(this).attr('data-id');
            $.ajax({
                    type: "GET",
                    url: "api/likes?id=" + $(this).attr('data-id'),
                    processData: false,
                    contentType: "application/json",
                    data: '',
                    success: function(r) {
                    var res = JSON.parse(r)
                    console.log(r)
                    // $("[data-id='"+buttonid+"']").html(' <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+res.Likes+' Likes</span>')
                   },
                    error: function(r) {
                    console.log(r)
                                        }
                    });
                }); 
 </script>

希望它能解决...！

更新

我只会执行我会尝试做的事情

<div>
  <button class="btn btn-primary"  data-id="posts[index].PostID" type="button" id="InteractButt" style="background-image: url(&quot;assets/img/Thumbs%20Up.png&quot;);"></button>
</div>
<script>
$('#InteractButt').on('click', function(){
  var buttonid = $(this).attr('data-id');
  $.post('api/likes', { 'buttonid': buttonid }, function(data, xhr, status){
    console.log(JSON.parse(data));
  }
}
</script>

我的php看起来像...

$postid = $_POST['buttonid'];

Answer 2

您正在通过AJAX发送发帖请求。您无需发送带有GET参数的帖子的 id 。您只需使用$ _POST即可在api端获取ID。

使用Jquery的FormData将id作为数据发送到您的api。

var formData = new FormData();
formData.append('id', $(this).attr('data-id'))

$.ajax({
    method: "POST",
    url: "api/likes",
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(r) {
        var res = JSON.parse(r)
        console.log(r)
    },
    error: function(r) {
        console.log(r)
    });
});

像这样在API端获取数据。

$postId = $_POST['id']

Answer 3

我简直不敢相信自己如此愚蠢，我真的不想承认这一点，但是我解决了这个问题，并且在偶然的机会下，其他人被卡住了...

我的AJAX侦听器在生成帖子时必须位于foreach循环内。我在页面底部将它作为一个单独的脚本...

我正在学习...

RESTful API无法从AJAX按钮接收POST

3 个答案: