我的ajax呼叫获得正确的响应,但没有做任何事情

时间:2019-05-16 17:16:21

标签: php html ajax

我正在尝试在ajax中创建一个“喜欢/不喜欢”按钮。 Ajax将我的数据发送到一个单独的文件,该文件保存在数据库中,并且该文件发送回我从chrome网络响应窗口获得的成功响应{"status":"success","message":"Like has been saved.","data":{"like":"1"}}。但是$ajax(...)。done中的代码无法正常工作

我已经把console.logged和var.dump了我可能的所有代码。我的数据正在发送到我的数据库,这意味着SQL之类的类是正确的。我还尝试过简单地console.log'给响应“ res”添加信息,然后将其余信息放入评论中,但这又没有给我任何帮助


<div>
    <a href="#" data-id="<?php echo $post->id ?>" class="like">Like</a>  
    <a href="#" data-id="<?php echo $post->id ?>" class="dislike" style="display:none;">Dislike</a>
    <span class='likes' data-id="<?php echo $post->id ?>"><?php echo $post->getLikes(); ?></span> people like this
</div>

$("a.like, a.dislike").on("click",function(e){
      var postId = $(this).data("id");
      if($("a.like")){
        var type = 1;
      }else if($("a.dislike")){
        var type = 0;
      }
      var elLikes = $(this).siblings(".likes");
      var likes=elLikes.html();

      $.ajax({
          method: "POST",
          url: "ajax/postlike.php",
          data: {postId: postId, type:type},
          dataType: "json",
      })
      .done(function( res ) {
          console.log(res);
          if(res.status=="succes"){
              console.log(res);

              if(res.data.like=="1"){
                  likes++;
                  elLikes=html(likes);
                  $("a.like").css("display","none");
                  $("a.dislike").css("display","inline-block");

              } else if(res.data.like=="0"){
                  likes--;
                  elLikes=html(likes);
                  $("a.dislike").css("display","none");
                  $("a.like").css("display","inline-block");
              }
          }
      });
      e.preventDefault();

});

if(!empty($_POST)){
        try {
            $postId=$_POST['postId'];
            $type=htmlspecialchars($_POST['type']);
            $userId=$_SESSION['user_id'];

            $l = new Like();
            $l->setPostId($postId);
            $l->setUserId($userId);
            $l->setType($type);
            $l->save();

            $res = [
                "status" => "success",
                "message" => "Like has been saved.",
                "data" =>[
                    "like" => $type
                ]
            ];

        }catch (trowable $t) {
            $res = [
                'status' => 'failed',
                'message' => $t->getMessage()
            ];
        }
        echo json_encode($res);
        var_dump($res);
    }

我期望发生的事情是Ajax将JSON数据发送到php代码,并将其放入数据库中,并且可以正常工作。然后给出对Ajax的成功响应,也行之有效。然后,Ajax将切换出“喜欢/不喜欢”按钮,同时从范围“喜欢”中增加或接受1个喜欢。但是,它绝对不起作用

我几乎100%可以确定问题是我忽略的愚蠢问题,但我确实找不到。

3 个答案:

答案 0 :(得分:-1)

在以下行中输入“成功”的错字:if(res.status=="succes"){

答案 1 :(得分:-1)

您可以尝试以下操作:

error: function(xhr, status, error) { 
    console.log(error)
},
success: function(response) {
    console.log(response)
}

在您的Ajax函数中,了解响应中在服务器端发生了什么。

答案 2 :(得分:-2)

如果您为ajax请求指定了期望的返回数据类型,而实际返回的值不是您指定的值,那么如果您拥有一个错误/失败函数,则将触发该函数。这是因为添加dataType: "json"会导致您ajax尝试将返回值解析为json,当失败时,它将触发您的错误处理程序。最好省略dataTaype,然后在完成的函数中添加JSON.parse的try catch来解决此问题。

E.G

.done(function (string_res) {
    console.log(string_res);
    try {
        var json_obj = JSON.parse(string_res);
        console.log(json_obj);
    } catch (e) {
        console.log('failed to parse');
    }   
    // do work/operations with json_obj not string_res
})
.fail(function (jqXHR, textStatus) {
    console.log('failed')
});