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 からエコーされた変数を受け取り、コードに基づいて、要素の HTML にid="id".

ただし、jQuery は、投稿したコードの HTML と一致しないことに注意してください。

HTML には、 と の ID を持つ画像がlikesありdislikes、それぞれに評価対象のアイテムの ID が追加されています。要素 ID は一意でなければならないので、これは良いことです。

ただし、これらのリンクに基づいて、各画像にクラスを追加して、クリック イベントを簡単に設定できるようにする必要があります。

好きな/嫌いな画像の1つのペアが次のようになるとしましょう:

<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

最初のステップは、高評価、低評価の数、およびレビュー ID を DOM 内でアクセスできるようにすることです。たとえば、次のようなものです。

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 に答える