點贊按鈕而不刷新整個頁面

Question

我在網站上創建了一個喜歡按鈕。 它是使用PHP完成的。 當有人點擊喜歡時，它將增加計數並將其更改為“不喜歡”。 單擊時類似，但計數遞減。

問題是，當單擊“贊”按鈕時，整個頁面都會刷新。 當單擊like時，它會轉到頁面“ like.php”，它將執行增量，減量和其他操作，然后返回上一頁。 我聽說使用ajax / jquery可以刷新div而無需重新加載整個頁面。 我該怎么做。 我是ajax / jquery的新手。

Answer 1

$.post( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
});

https://api.jquery.com/jQuery.post/

您可以使用.click進行單擊事件。 http://api.jquery.com/click/

Answer 2

假設您的“喜歡”按鈕的屬性為class =“ like”，而您的“不喜歡”按鈕的屬性為class =“ unlike”

這樣的事情應該可以解決問題：

$(function() {
    $like = $(".like");
    $unlike = $(".unlike");

    if ($like.length) {
        $like.on('click', function() {
            $.ajax('like.php', { data: 'here' }, function(response) {
                // do something with your response from like.php:
                $like.addClass("unlike");
                $like.removeClass("like");
                $unlike = $like;
            });
        });
    }

    if ($unlike.length) {
        $unlike.on('click', function() {
            $.ajax('like.php', { data: 'here' }, function(response) {
                // do something with your response from like.php:
                $unlike.addClass("like");
                $unlike.removeClass("unlike");
                $like = $unlike;
            });
        });
    }
});

您將需要將{ data: 'here' }更改為您想要發送給like.php的任何數據。

response將保存like.php返回的數據，因此請確保它只是動作IE的JSON結果：

echo json_encode(array('result' => '1'));

要么

echo json_encode(array('result' => '2'));

然后，您可以測試if (response.result == 1) { var liked = true; } if (response.result == 1) { var liked = true; } 。