如何创建下载计数器

Question

好的，我在这里要做的是，我想要一个下载计数器，它将实时计算下载并实时输出值，而无需用户清除缓存或刷新页面。 现在，我可以使用一些JavaScript（这是用于实时更新）与MySQL和PHP相结合来实现这一目标。 但问题是，为了让我实时输出值，我的意思是当用户点击这个“按钮”时我必须创建一个span标签并将其包含在包含按钮的锚标签内/链接我正在跟踪。

为了帮助您更好地理解，这里有我的HTML和JavaScript。

<?php 

    foreach($files_array as $key=>$val)
    {
        echo '<a class="btn btn-primary btn-large" href="download.php?file='.urlencode($val).'"><span class="download-text">Download 
                </span></a><span class="download-count" title="Times Downloaded">'.(int)$file_downloads[$val].'</span>
                ';
    }

?>

这是JavaScript

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

$('#download-button a').click(function(){

    var countSpan = $('.download-count',this);
    countSpan.text( parseInt(countSpan.text())+1);
}); });

我希望能够在标签内部但不包含计数器的span标签。

提前致谢 ：）

Answer 1

我在评论中建议的是这样的：

<ul>
<?php 
    foreach($files_array as $key=>$val) {
        echo '<li>';
        echo '<a class="btn btn-primary btn-large" href="download.php?file='.urlencode($val).'"><span class="download-text">Download</span></a><span class="download-count" title="Times Downloaded">'.(int)$file_downloads[$val].'</span>';
        echo '</li>';
    }
?>
</ul>

然后在JavaScript中：

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('#download-button a').click(function(){
        var countSpan = $(this).closest('li').find('.download-count');
        countSpan.text( parseInt(countSpan.text(), 10) + 1);
    }); 
});

Answer 2

如果您希望能够轮询已下载项目的全局用户数量并更新前端而不刷新页面，则需要使用套接字或setInterval（）：

以下是使用setInterval（）并每隔3秒更新一次数字的方法（你不想做太多或者服务器上的负载很大）：

<ul>
<?php 
    foreach($files_array as $key => $val) {
        echo "<li id=\"download-$key\">";
        echo '<a class="btn btn-primary btn-large" href="download.php?file=' . urlencode($val) . '"><span class="download-text">Download</span></a><span class="download-count" title="Times Downloaded">' . (int)$file_downloads[$val] . '</span>';
        echo '</li>';
    }
?>
</ul>

<script>
    setInterval(function() {
        $.getJSON('/download-count.php', function(e) {
            var i;
            for (i in e) {
                if (e.hasOwnProperty(i)) {
                    $('#download-' + i + ' .download-count').text(e[i]);
                }
            }
        });
    }, 3000); // ping every 3 seconds
</script>

您需要一个新的Ajax文件（在我的例子中我称之为/download-count.php ），它将为您的数字回显JSON

echo json_encode($file_downloads);

这显然是一个简单的例子，但希望它能得到重点。

更新： download-count.php文件需要看起来像这样：

<?php
    /**
     * You don't show how you populate $file_downloads in your question but
     * however you do it, do it the same way here
     */
    $file_downloads = foo();

    echo json_encode($file_downloads);

    die();