如何根据我的 AJAX 结果主动增加我的计数器？答案

【问题标题】：How do I actively increment my counter based off of my AJAX results?如何根据我的 AJAX 结果主动增加我的计数器？
【发布时间】：2011-05-31 20:54:57
【问题描述】：

我的第一个 ajax 项目的最后一步。我制作了一个竖起大拇指图标，当按下该图标时，通过此代码增加数据库中的一列：

这是可查看页面上的 HTML 和 JQuery

<div id="comment_id">+1</div>
<div id="thumb_thumb">                              
    <?php $comment_id = $result['id'];?>
    <a class="myButtonLink" href="Profile_test.php?id=<?php echo $prof->id; ?>" id="<?php echo $comment_id; ?>">Vote Up!</a>
</div>

    <script>
    $('.myButtonLink').click(function(e) {
      e.preventDefault();
      var comment_id = $(this).attr('id');
      $.ajax({ type: 'POST',
               url: 'thumbs.php',
               data: 'comment_id=' + comment_id,
               success: function(data) {
                  alert(data);
                  if(data.result == "error") {
                      alert(data.msg);
                 } else {
                      $('#numvotes').html(data.msg);
                 }
             }
      });
    });        
    </script>

这是发送到的隐藏 PHP 页面

    <?php
     require_once($_SERVER['DOCUMENT_ROOT']
     . '/includes/system/init.php');

     // 1. CHECK AND SEE IF THE
     "$comment_id" IS VALID. I AM GOING TO
     RETREIVE THE VALUE OF THE $_POST BEING
     SENT FROM THE PHP PAGE THAT IS SENDING
     THE REQUEST

     /* QUERY TO CHECK $_POST DATA WITH: */

    /* this is grabbing id that jquery
     sent over via post */
     if(isset($_POST['comment_id'])) {


         /* making a variable out of the
     grabbed id */ $retreived_comment_id =
     $_POST['comment_id'];  


     $query = "UPDATE `CysticAirwaves` SET
     `thumbsUp` = `thumbsUp` + 1 WHERE `id`
     = '" . $retreived_comment_id . "'"; $request =
     mysql_query($query,$connection) ;
     $result = mysql_fetch_array($request);


     }
   ?>

所以现在我只需要能够在单击拇指并在数据库中将指定的注释标记为加一时动态地让我的计数器工作

<div id="comment_id">
            +1 //NEED TO MAKE THIS ACTUALLY COUNT
</div>

提前致谢

【问题讨论】：

标签： php jquery html css ajax

【解决方案1】：

var currentCount = $('#comment_id').text();

$('#comment_id').text(++currentCount);

【讨论】：

那么我如何将它链接到那个 div？我在这方面真的很新，一直在坚持
@LightningWrist - '我如何链接那个 div' 是什么意思？ #comment_id 指的是您已经在 html 中指定的 id="comment_id" ......它们已经链接......
它在一定程度上增加了它，但它实际上与我现有的代码发生冲突，并且以不同的方式增加计数器和数据库。它也破坏了我的 html 结构，并且只增加（不正确地）页面上的第一条评论。我赞成它虽然:)
@light：如果它破坏了您的 html，那是因为 .text 剥离了每个 html 标记。您需要有一个只包含没有任何标签的数字的 div。 <div id="counter">123</div>

【解决方案2】：

几件事。

1) 您需要确保 POST 值是整数，而不是任意和/或恶意数据

$retreived_comment_id = filter_var($_POST['comment_id'], FILTER_SANITIZE_NUMBER_INT);
if(!is_int($retreived_comment_id)) {
  echo 'error';
  exit;
}

2) 确保在使用用户输入时所有数据都被转义是个好主意

$query = "
  UPDATE `CysticAirwaves` 
  SET `thumbsUp` = `thumbsUp` + 1 
  WHERE `id` = ".mysql_real_escape_string($retreived_comment_id)."
"; 

$request = mysql_query($query, $connection);

3) 成功返回'success'，失败返回'error'

$request = mysql_query($query, $connection);
if($request) {
  echo 'error';      
} else {
  echo 'success';
}

exit;

4) 使用 jQuery 增加计数

success: function(data) {
  if(data == "success") {
    var $comment = $('#comment_id');
    $comment.html($comment.text()+1);
  }
}

【讨论】：

【解决方案3】：

将此行放在 ajax 成功请求中，而不是 alert(data)

document.getElementById('comment_id').innerHTML = data;

【讨论】：

使用jQuery应该是$('#comment_id').html(data);

【解决方案4】：

我注意到您没有将任何内容从 PHP 代码返回到 ajax。您需要返回一个至少包含“msg”和“error”的数组，以满足您当前的成功代码。然后为“成功”创建另一个数组元素 => 如果没有错误，则为 1。

//your php should return your array at the end of your function like this:
return array("msg" => "some message to return", "error" => "some error if you have one", "success" => [1 or 0] );

//ajax function blah blah blah
success: function(data){
    if( data.success == 1 ){
        var currentCount = $("#comment_id").text().substr(1);
        $("#comment_id").text( currentCount+1 );
     }

【讨论】：