时间戳

首页 > 解决方案 > 如何使用 PHP、jQuery 和 AJAX 实现类似计数器？

php - 如何使用 PHP、jQuery 和 AJAX 实现类似计数器？

问题描述

我正在努力为报价创建一个类似的计数器。当用户单击点赞按钮并显示点赞数时，我试图增加点赞计数器。

我遇到的问题：

  1. 当我刷新页面时，like 计数器会增加（不是因为我实际上按下了like 按钮）。

  2. 我尝试实现 jQuery 以实时更新类似计数器，但失败了:(

我参考了所有与此相关的 QnA 无法找到所需的解决方案。我经历了这个 [question] PHP/MySQL Like Button，并进行了必要的更改，但现在当我单击按钮时数据库中没有更新。

This is the code for one quote.

<div class="testimonial text-sm is-revealing">
 <div class="testimonial-inner">
  <div class="testimonial-main">
   <div class="testimonial-body">
   <p id="q1">
       <?php
         $sql = "select quotes from voted where voted.quote_id = 1";
         $result = mysqli_query($link,$sql);
         $row = mysqli_fetch_array($result);
         echo "$row[0]";
      ?></p>
   </div>
  </div>
  <div class="testimonial-footer">
   <div class="testimonial-name">
    <button method="POST" action='' name="like" type="submit" class="like"><b>Like</b></button>&nbsp;&nbsp;
      <?php
        if(isset($_POST['like'])){
        $link = mysqli_connect("localhost","root","","success");
        $sql = "UPDATE voted SET likes = likes+1 WHERE voted.quote_id = 1";
        $result = mysqli_query($link,$sql);
        }
      ?>
       <label>
        <?php
          $link = mysqli_connect("localhost","root","","success");
          $sql = "SELECT likes from voted WHERE voted.quote_id = 1";
          $result = mysqli_query($link,$sql);
          $row = mysqli_fetch_array($result);
          echo "$row[0]";
         ?>
        </label>&nbsp;&nbsp;
        <button class="btn" id="clipboard" onclick="copyFunction('#q1')"></button>                    
       </div>
  </div>
</div>

当我点击点赞按钮时，如何制作点赞计数器？

如何为此实现 jQuery 和 AJAX，以便在不刷新页面的情况下更新计数器？

请原谅我糟糕的代码结构。

谢谢你的帮助。

PS这是单引号的样子

标签： phpjqueryhtmlajax

解决方案

要使这样的异步设置起作用，您需要三件事：

  1. 处理 ajax 请求的后端脚本
  2. 你的前端页面
  3. 用于发送 ajax 请求和接收数据的 JQuery 脚本

您的后端 PHP 脚本看起来像这样 (async.php)：

 <?php
    if(isset($_POST['get_quotes'])) {
         $sql = "select quotes from voted where voted.quote_id = 1";
         $result = mysqli_query($link,$sql);
         $row = mysqli_fetch_array($result);
         echo "$row[0]";
    }

    if(isset($_POST['like'])) {
        $link = mysqli_connect("localhost","root","","success");
        $sql = "UPDATE voted SET likes = likes+1 WHERE voted.quote_id = 1";
        $result = mysqli_query($link,$sql);
    }
?>

您的前端页面将包含一个带有 ID 的元素以与 JQuery 挂钩，以及一个带有类或 ID 的按钮以捕获点击事件 (page.html)：

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="core.js"></script>
    <body>
    <button id="increment-like" value="Like" type="button" />

    <p id="like-count">
    </p>
</body>
<html>

最后，对于使用 JQuery (core.js) 的基本 ajax 请求，您的 JavaScript 文件应如下所示：

$(document).ready(function() {
    // initially grab the database value and present it to the view

    $('#like-count').text(getDatabaseValue());

    $('#increment-like').on('click', function() {
        incrementDatabaseValue();
    });
});

function getDatabaseValue() {
     $.post("async.php",
        {
            get_quotes: true
        },
        function (data, status) {
            // check status here
            //return value
        return data;
        });
}

function incrementDatabaseValue() {
     $.post("async.php",
        {
            like: true
        },
        function (data, status) {
            // check status here

        // update view
        $('#like-count').text(getDatabaseValue());
        });
}

我没有测试过这段代码，但它应该足够清晰和详细，让你走上正轨。

推荐阅读