2

好的，所以我在这里要做的是我想要一个下载计数器，它可以实时计算下载量并实时输出值，而无需用户清除缓存或刷新页面。现在我可以使用一点点 JavaScript（用于实时更新）结合 MySQL 和 PHP 来实现这一点。但问题是，为了让它实时输出值，我的意思是当用户点击这个“按钮”时，我必须创建一个跨度标签并将其包含在包含按钮的锚标签内/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);
}); });

我希望能够在标签内部但在其外部不包含计数器的跨度标签。

提前致谢 ：）

4

2 回答 2

2

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

<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);
    }); 
});
于 2013-03-25T01:30:44.987 回答
1

如果您希望能够在不刷新页面的情况下轮询有多少全球用户下载了该项目并更新前端，您将需要使用套接字或 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();
于 2013-03-25T01:52:07.113 回答