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を使用していないので、Imの処理方法が正しいかどうかはわかりません。どんな助けもありがとう。

Answer 1

最初の手順では、好き嫌いの数とレビュー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++); 
    }); 
}); 

（そして嫌いのための同じ。）最後のステップは、基本的にはSQLの更新を実行し、成功/失敗を返すべき、「updateLikes.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変数を受け取ることになる。

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

Answer 2

likes.phpとdislikes.phpファイルには、次のような単純なことができあなたのコード上で、id="id"という要素のHTMLに置きます。

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

HTMLには、likesとdislikesのIDを持つ画像があり、それぞれに評価対象のアイテムの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); 
     } 
    }); 
} 

うまくいけば、これはすべてあなたにとって理にかなっていますが、この回答のコメントにご質問があればお気軽に投稿してください。