Question

我正在建立一个数据库驱动的笑话网站，用户可以在其中投票。当有人投票时，mysql数据库中的笑话“得分”列会增加。成功之后，我想在页面上更新笑话的分数。我有两个问题 - 如何选择显示的关联分数以及如何查询数据库以获取更新的值。这是运行ajax的jquery：

 <script type="text/javascript">
 $(function() {
   $(".votebutton").click(function() {
      var id = $(this).attr('id');
      var ip = $('.ipz').attr('id');
      var dataString = 'id=' + id + '&ip=' + ip;
      $.ajax({
        type: "POST",
        url: "bin/vote.php",
        data: dataString,
        success: function() {
          // find the associated joke's score and query db for new score, or increment it, either is fine.
        }
      });
      return false;
   });
 });
 </script>

以下是笑话的构造方式，以便您可以看到得分的分布是什么：

 <div class="jokecontainer" id="joke_<?php echo $row['id']; ?>">
      <div class="score" style="float: left; width: 110px; height: 85px;">
           <p class="scorenum" id="score_<?php echo $row['id']; ?>"><?php echo $row['score']; ?></p>
           <p class="scorevote"><a class="votebutton" id="<?php echo $row['id']; ?>" href="#">VOTE UP</a></p>
      </div>
      <div class="joke">
           <span class="joketext"><?php echo $row['joke']; ?></span>
      </div>
      <div class="jokeinfo" style="float: left; width: 200px; height: 85px; margin-top: 5px;">
           <span class="jokeinfo1">Date: </span><span class="jokeinfo2">date</span><br />
           <span class="jokeinfo1">Author: </span><span class="jokeinfo2"><?php echo $row['user']; ?></span><br />
           <span class="jokeinfo1">Category: </span><span class="jokeinfo2"><?php echo $row['category']; ?></span><br />
      </div>
 </div>

得分的id是这样的：id = score_然后是id。例如，如果点击ID为123的投票按钮，则得分的ID将为“score_123”。

我认为我要做的是构建一个id选择器，其中包含：“score_”和现有的var id：

 var scoreid = "#score_" + id
 $(scoreid).html();

然后是第二部分 - 我想我将得分存储为jquery变量然后递增它......不知道如何开始。

感谢

Answer 1

我修改PHP以返回新的分数值作为对upvote的响应，作为JSON对象。假设你的回答是这样的（你可能希望通过让它成为你的笑话对象的表示来使它变得更复杂 - 所以你可以拥有更多的键和值，例如id）

{"newScore" : 12}

//or if you want, something more complex like - note the script below assumes the first JSON string
{"joke":{"id":123456, "score":12, "author":"someone", "date":"2012-12-12T00:00:00"}}

然后您可以解析JSON并插入新分数，就像您提到的那样，您正在考虑尝试：

<script type="text/javascript">
 $(function() {
   $(".votebutton").click(function() {
      var id = $(this).attr('id');
      var ip = $('.ipz').attr('id');
      var dataString = 'id=' + id + '&ip=' + ip;
      $.ajax({
        type: "POST",
        url: "bin/vote.php",
        data: dataString,
        dataType: 'json', //specify that the response content-type is expected to be JSON
        success: function(data) {
          // expect server to return the updated data score
            if(data.newScore) {
               $("#score_" + id).html(data.newScore);
           }
           else {
            //handle error condition
           }
        }
      });
      return false;
   });
 });
 </script>

如果多个用户同时投票，这可能会有所帮助 - 第二个选民将看到正确的最终值，即他的投票和之前选民投票的总和（即他将看到+2结果而不是+1）。然而，第一个选民仍然看到一个陈旧的价值，第二个选民可能会被增加2而不是1混淆，所以如果你想获得更实时的东西，你需要考虑更多，尽管我认为它可能不值得 - 有一个检查页面上某些内容更新的心跳（有点像这样的SO）可能是一个很好的妥协。

如果您只是在success上将页面上当前投票的值增加一而不让服务器返回任何内容，则可以执行以下操作（并注意您要优化）这个片段并添加一些错误检查）：

success: function() {
    var newScore = parseInt($("#score_" + id).html()) + 1;
    $("#score_" + id).html(newScore);
}

帮助更新成功jquery ajax上的关联元素

1 个答案: