Используйте JQuery Ajax для обновления числа понравившихся в базе данных

Question

Im используя следующий код в своем 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

Первым шагом должно быть количество понравившихся, нелюбимых и идентификаторов просмотра, доступных в 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 

Answer 2

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-формате у вас есть изображения с идентификаторами likes и dislikes, при этом каждый из них добавляется вместе с идентификатором оцениваемого предмета. Это хорошо, поскольку идентификаторы элементов должны быть уникальными.

Исходя из этих ссылок, вы хотите добавить класс к каждому изображению, чтобы упростить настройку событий кликов.

скажем, что одна пара, например, изображений/неприятия заканчивается так:

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

Надеюсь, это все имеет смысл для вас, но вы можете оставлять любые вопросы, которые могут возникнуть в комментариях к этому ответу.