AJAX和PHP制作像按钮

Question

I have this like button code I want the like number to go up after click but there a need to refresh the page how can I do this:

    <script type="text/javascript">
jQuery(document).ready(function ($) { 
    $('body').on( 'click' , '.votebutton' , function(){
        var span = $(this).children('span');
        var no = parseInt($(this).text(), 10);
        $(span).text(++no);
        var _id = $(this).data('vote');
        $.ajax({
            type: 'POST',
            url: 'vote.php',
            data: { 
                id: _id
            }
        });
    });
});
</script>
<?php 
$q = mysql_query("SELECT * FROM vote");while($row = mysql_fetch_array($q)){
$item[] = $row;
foreach($item as $i){}
  echo "<button class='votebutton' data-vote='".$row[0]."'>Up vote</button><span>".$row[1]."</span>";
}
?>

Answer 1

It seems like you have two options. You could either A) make the post request return the new like count; or B) increment it manually with jQuery, which would be faster but not necessarily as accurate.

For the first option, you'd change your AJAX request to something like

$.ajax({
    ...
}).done(update_count)

where update_count is a function that takes the request as an argument and updates the count for a button. This method is is slower, but it would show an accurate like count at every instance, since the shown value is always the most current value in the database.

For the second option, you could select the span for the button and update its value with jQuery. This would be slightly faster, since it wouldn't have to wait for the AJAX query to complete, but it would only increment once, even if somebody else hit the "like" button.