PHP PDO 中的类似 AJAX 的按钮不起作用

Question

我正在通过 howcode 在 youtube 上关注一系列教程。它是关于建立一个社交网络。当谈到喜欢/评论时，他使用了一个 api。但是，这对我不起作用，我想使用普通的 ajax。我想提交一个类似的请求：

<form>
if (!DB::query('SELECT post_id FROM post_likes WHERE post_id=:postid AND user_id=:userid', array(':postid'=>$post['id'], ':userid'=>$userid))) {
               echo "<input type='submit' name='like' value='Like' data-id=".$post['id'].">";
    } else {
    echo "<input type='submit' name='unlike' value='Unlike' data-id=".$post['id'].">";
    }
    echo "<span>".$post['likes']." likes</span>
    </form>

到达这个 ajax：

   $('[data-id]').click(function() {
            var buttonid = $(this).attr('data-id');
            $.ajax({
                    type: "POST",
                    url: "index.php?postid=" + $(this).attr('data-id'),
                    processData: false,
                    //ScontentType: "application/json",
                    data: '',
                    success: function(r) {
                            console.log("hhhhhhhhhhhhhhhh")
                    },
                    error: function(r) {
                            console.log(r)
                    }
            });
    });

然后去这里：

if (isset($_GET['postid'])) {
     Post::likePost($_GET['postid'], $userid);
 }

Answer 1

您需要添加一个选择器，即类或 id。到要使用 jquery 选择器的元素，然后在该选择器上绑定事件。请检查以下代码更新。您还需要添加 preventDefault 方法来防止该选择器的原始事件。

<form>
    if (!DB::query('SELECT post_id FROM post_likes WHERE post_id=:postid AND user_id=:userid', array(':postid'=>$post['id'], ':userid'=>$userid))) {
          echo "<input class = "submit-class" type='submit' name='like' value='Like' data-id=".$post['id'].">";
    } else {
         echo "<input class = "submit-class" type='submit' name='unlike' value='Unlike' data-id=".$post['id'].">";
    }
    echo "<span>".$post['likes']." likes</span>
</form>

AJAX

$('.submit-class').click(function(e) {
    e.preventDefault();
      var buttonid = $(this).attr('data-id');
            $.ajax({
                    type: "POST",
                    url: "index.php?postid=" + $(this).attr('data-id'),
                    processData: false,
                    //ScontentType: "application/json",
                    data: '',
                    success: function(r) {
                            console.log("hhhhhhhhhhhhhhhh")
                    },
                    error: function(r) {
                            console.log(r)
                    }
            });
    });