Fatal编程技术网
  • php/
  • 如何使用PHP、jQuery和AJAX实现like计数器？

如何使用PHP、jQuery和AJAX实现like计数器？

php jquery html ajax

如何使用PHP、jQuery和AJAX实现like计数器？,php,jquery,html,ajax,Php,Jquery,Html,Ajax,我正在为引号创建一个类似的计数器。当用户单击like按钮并显示like的数量时，我试图增加like计数器 我遇到的问题： 当我刷新页面时，Like计数器会增加（不是因为我实际上按了Like按钮） 我尝试实现jQuery以实时更新like计数器，但失败：( 我参考了所有与此相关的QnA，但没有找到所需的解决方案。我检查了这个[问题]，并做了必要的更改，但现在当我单击按钮时，数据库中没有更新 This is the code for one quote. <div class="testim

我正在为引号创建一个类似的计数器。当用户单击like按钮并显示like的数量时，我试图增加like计数器

我遇到的问题：

  • 当我刷新页面时，Like计数器会增加（不是因为我实际上按了Like按钮）

  • 我尝试实现jQuery以实时更新like计数器，但失败：(

    • 我参考了所有与此相关的QnA，但没有找到所需的解决方案。我检查了这个[问题]，并做了必要的更改，但现在当我单击按钮时，数据库中没有更新

    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>

    这是一个报价的代码。

    

    
喜欢
    单击like按钮时，如何使like计数器实现

    如何实现jQuery和AJAX，从而在不刷新页面的情况下更新计数器

    请原谅我糟糕的代码结构

    谢谢你的帮助

    p.S

    要使这样的异步设置正常工作，您需要三件事：

  • 处理ajax请求的后端脚本
  • 你的首页
  • 用于发送ajax请求和接收数据的JQuery脚本
    • 您的后端PHP脚本如下所示（async.PHP）：

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

    要让这样的异步设置正常工作，您需要三件事：

  • 处理ajax请求的后端脚本
  • 你的首页
  • 用于发送ajax请求和接收数据的JQuery脚本
    • 您的后端PHP脚本如下所示（async.PHP）：

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

    旁注：您不应该在
    echo“$row[0]”之类的引号中加上变量人们会争辩说它是有效的，是的，但这是一种不好的做法，可能会产生副作用。将字符串与
    连接起来，就可以了。
    echo$row[0]
    按钮
    没有
    方法
    或
    操作
    属性，它们属于
    表单
    。感谢@Tim注意到这一点。我将按钮标记包含在表单标记中，现在页面刷新，当我单击按钮时，我的类计数器正在更新。旁注：你不应该将变量放入quot类似于
    echo“$row[0]”；
    。人们会认为它是有效的，是的，但这是一种不好的做法，可能会产生副作用。将字符串与
    连接起来，就可以了。
    echo$row[0]
    按钮
    没有
    方法
    或
    操作
    属性，它们属于
    表单
    。感谢@Tim注意到这一点。我将按钮标记包含在表单标记中，现在页面刷新，当我单击按钮时，我的类似计数器正在更新。

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

    

    <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>

    

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