2

我在我的 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。任何帮助，将不胜感激。

4

2 回答 2

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 函数的成功部分将接收numberOfLikes从 PHP 回显的变量，并根据您的代码将其放在带有id="id".

但是请注意，您的 jQuery 与您发布的代码中的 HTML 不匹配。

在 HTML 中，您会得到带有 id 的图像，likes并且dislikes每个图像都附加有被评分项目的 ID。这很好，因为元素 ID 必须是唯一的。

但是，基于这些链接，您需要为每个图像添加一个类，以便更轻松地设置点击事件。

假设一对喜欢/不喜欢的图像最终是这样的：

<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);
        }
    });
}

希望这一切对您来说都有意义，但请随时在评论中发布您对此答案可能有的任何问题。

于 2012-05-12T22:23:34.373 回答
0

第一步是在 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
于 2012-05-12T22:18:45.017 回答