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의 경우 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); 
     } 
    }); 
} 

바라기를이 모든 것이 당신에게 의미가 있지만이 대답에 대한 의견에 질문이 있으시면 언제든지 게시 해주십시오.