单击按钮时增加/减少变量 - PHP Javascript AJAX答案

【问题标题】：Increment/Decrement variable on button click - PHP Javascript AJAX单击按钮时增加/减少变量 - PHP Javascript AJAX
【发布时间】：2019-08-03 06:20:40
【问题描述】：

我有一个喜欢/不喜欢按钮和喜欢字段的数量，它回显了一个变量，该变量获得喜欢的数量，如下所示：

PHP-HTML：

<a onclick="javascript:likes(<?php echo $row['Question_ID'];?>);"><button type="submit"  class="btn btn-custom btn-sm liketoggle" name ="like"><span>likes: <?php echo $row['likes'];?></span>
<button type="submit"  class="btn btn-custom btn-sm liketoggle" name ="like"></button></a>

//Printing 'Like' if its been liked by user, and 'Unlike' if not liked by user
<? $qid = $row['Question_ID']; $query2 = "SELECT * FROM likes WHERE 
       user_id='$user_id' and qid = '$qid'";
      $results2 = mysqli_query($con,$query2);
      if(mysqli_num_rows($results2) == 0){ echo '<span>Like</span>';} 
      else{echo '<span>Unlike</span>';}?></button>

AJAX：

function likes(qid) {

    if (ajax.readyState == 4 || ajax.readyState == 0) {
        ajax.open("POST", 'likes.php?qid='+qid, true);

        ajax.onreadystatechange = queried(type);
        ajax.send();
    }
}

Javascript - 切换喜欢/不喜欢：

$(".liketoggle").click(function () {
            $(this).find("span").text(function(i, v){
               return v === 'Like' ? 'Unlike' : 'Like'
               return v === 'Unlike' ? 'Like' : 'Unlike'
            })
        });

当用户点击喜欢时，我是否可以增加喜欢的数量（$row['likes']），而在不喜欢时，我可以以同样的方式减少喜欢的数量？这怎么可能？ AJAX 正在数据库中完成这项工作，但我想更改前端的点赞数。

【问题讨论】：

您将需要一个 PHP 函数来查询数据库中的点赞数并在 AJAX 请求中发送回
我不想刷新页面。它在likes.php 中吗？以及如何使用 AJAX 将其发回？ @奇普斯特
stackoverflow.com/a/20150474/2191572
@MonkeyZeus 在您的示例中，您正在警告从 PHP 文件返回的内容。如何在页面内的 html 标记中打印它？这是我在页面中的 php 变量。
@JawadSleiman 这是使用 jQuery 进行的基本 DOM 操作。有很多资源可以用来学习如何做到这一点。您的$(this).find("span").text( 代码与您需要的非常相似。

标签： javascript php toggle auto-increment decrement

【解决方案1】：

尝试在你的 span 中指定一个 id：

<span id="likes">likes: <?php echo $row['likes'];?></span>

然后在您的 ajax 中，使用 $('#likes').html(response) 将来自 Ajax 调用的响应放入该 html 标记中：

Ajax 示例：

function likes(qid) {

    $.ajax({
        data: {qid: qid},
        type: 'POST',
        url: 'likes.php',
        success: function (response) {
            // Insert response into html
            $('#likes').html(response);
    }

}

【讨论】：