使用JQuery Ajax更新數據庫上的點贊次數

Question

我在HTML中使用以下代碼。 當用戶單擊評論時，它會嘗試更新每個評論的喜歡和不喜歡的次數。 這是它的jquery部分。

<script type="text/JavaScript">
$(document).ready(function(){
$("#likes").click(function(){
  $updateLikes();
 });
$("#dislikes").click(function(){
$updateDislikes();
});

function rate(){ //'rating' VARIABLE FROM THE FORM in view.php
var the_id = $("#id").val(); //'id' OF THE CONTENT BEING RATED
var data = 'noLikes='+$noLikes+'&id='+the_id;

$.ajax({
    type: 'POST',
    url: 'rate.php', //POSTS FORM TO THIS FILE
    data: data,
    success: function(e){
        $("#id").html(e); //REPLACES THE TEXT OF view.php
        }
    });
}

function rate(){
    var the_id = $("#id").val(); //'id' OF THE CONTENT BEING RATED
var data = 'noDislikes='+$noDisikes+'&id='+the_id;

$.ajax({
    type: 'POST',
    url: 'dislikes.php', //POSTS FORM TO THIS FILE
    data: data,
    success: function(e){
        $("#id").html(e); //REPLACES THE TEXT OF view.php
        }
    });
}

}）;

html部分在這里：

 $getreviewresults = $mysqli->query("SELECT companyReviewed, reviewID, majorName, gpa,
 noLikes, noDislikes, dayAtWork FROM reviews NATURAL JOIN usersPosted NATURAL JOIN users 
 NATURAL JOIN majorOfUser NATURAL JOIN majors");
 <table class="table-ReviewResults">
    <tr>
        <td rowspan="2" class="viewReviewLink"><a href="review.php">View Review</a>     </td>
        <td class="schoolInfo">
    <?php
        print('COMPANY:&nbsp;&nbsp;<span class="resultData">'.$reviewitem['companyReviewed'].'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
        print('MAJOR:&nbsp;&nbsp;<span class="resultData">'.$reviewitem['majorName'].'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
        print('GPA RANGE:&nbsp;&nbsp;<span class="resultData">'.$reviewitem['gpa'].'</span>');
    ?>
        </td>
        <td rowspan="2" class="reviewRatingsNumbers">
    <?php
        $q = $mysqli->query("SELECT noLikes FROM reviews WHERE id='".$reviewitem['reviewID']);
        $likes['reviewID'] = $mysqli->num_rows($q);
        $p = $mysqli->query("SELECT noDislikes FROM reviews WHERE id='".$reviewitem['reviewID']);
        $dislikes['reviewID'] = $mysqli->num_rows($p);

        $l = 'likes';
        $d = 'dislikes';
        if($likes==1){
            $l = 'like';
        }
        if($dislikes==1){
            $d = 'dislike';
        }

        //THE NUMBER OF LIKES & DISLIKES
        print('<img id="likes'.$reviewitem['reviewID'].'" onClick="rate($(this).attr(\'id\'))" src="images/rateReview2-up.jpg">
            <img id="dislikes'.$reviewitem['reviewID'].'" onClick="rate($(this).attr(\'id\'))" src="images/rateReview2-down.jpg"><br />');
        print($likes.' '.$l.' and '.$dislikes.' '.$d);

我不確定如何創建likes.php和dislikes.php文件來更新喜歡和不喜歡的次數，並使用AJAX將它們發送到當前頁面，以便可以對其進行更新。 另外，我不確定我的處理方式是否正確，因為我以前沒有使用過JQuery。 任何幫助，將不勝感激。

Answer 1

likes.php和dislikes.php文件可以很簡單，如下所示：

<?php
    $clickedId = $_POST["id"];

    $numberOfLikes = updateLikes($clickedId);

    echo $numberOfLikes;


    function updateLikes($id)
    {
        // run UPDATE likes query

        // run SELECT numberOfLikes query

        return $numberOfLikes;
    }
?>

AJAX函數的成功部分將接收PHP回顯的numberOfLikes變量，並根據您的代碼將其放置在id="id"元素的HTML中。

但是請注意，您的jQuery與您發布的代碼中的HTML不匹配。

在HTML中，您會獲得帶有likes和dislikes ID的圖像，每個圖像都附加有被評估項目的ID。 這很好，因為元素ID必須是唯一的。

但是，基於這些鏈接，您需要為每個圖像添加一個類，以使其更易於設置click事件。

假設一對喜歡/不喜歡的圖片最終像這樣：

<img id="likes17" 
     class="rate-like"
     src="images/rateReview2-up.jpg">

<img id="dislikes17" 
     class="rate-dislike"
     src="images/rateReview2-down.jpg">

[格式清晰]

這會將類似圖片的點擊事件設置更改為以下內容：

$(".rate-like").click(function() {
    var elementId = $(this).attr('id');  // would be 'likes17' based on image above
    var clickedItemId = elementId.replace('likes', '');
    updateLikes(clickedItemId);
});

並且updateLikes函數將如下所示：

function updateLikes(id)
{
    $.ajax({
        type: 'POST',
        url: 'likes.php',
        data: 'id=' + id,
        success: function(data){
            $('#likes' + id).html(data);
        },
        error: function(xhr, textStatus, errorThrown) {
            var errorMessage = xhr.responseText;
            errorMessage = errorMessage.substring(errorMessage.indexOf('<title>') + 7, errorMessage.indexOf('</title>'));
            alert('Unable to update likes: ' + errorMessage);
        }
    });
}

希望這對您來說都是有意義的，但是請隨時在此答案的評論中發表您可能有的任何問題。

Answer 2

第一步是在DOM中訪問喜歡，不喜歡的內容和評論ID。 例如：

Likes: <span id='likes_count'>$likes</span>
Dislikes: <span id='dislikes_count'>$dislikes</span>
<span style='display: none;' id='review_id'>$reviewitem['reviewID']</span>

現在，當您進行AJAX調用時，可以引用這些值。

$("#likes").click(function(){
    $.post('updateLikes.php?reviewid=' + $("#review_id").text(), function() {
        // TODO check whether successful
        // increment # of likes and display
        var current_likes = parseInt($("#likes_count").text());
        $("#likes_count").text(current_likes++);
    });
});

（對於不喜歡的人也是如此。）最后一步是實現“ updateLikes.php”，它基本上應該只運行SQL更新並返回成功/失敗。

$q = $mysqli->query("UPDATE reviews SET noLikes = noLikes + 1 WHERE id=".$_GET['reviewid']);
// TODO return indication of success/failure