Question

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

为了帮助您更好地理解，这是我的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();

如何创建下载计数器

2 个答案: