按钮点击计数器保存号码答案

【问题标题】：Button click counter save number按钮点击计数器保存号码
【发布时间】：2014-11-12 16:19:01
【问题描述】：

我有这个小提琴，当用户点击一个按钮时，计数器工作：http://jsfiddle.net/z66WF/

这是代码：

<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

 var clicks = 0;
 function clickME() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
 }

问题是我想保存号码，所以例如：

用户 #1 点击按钮 10 次
用户 #2 打开站点，计数为 10，他单击，现在计数器开始 11
等新用户。

我正在尝试这样做以跟踪文件下载了多少次。

知道我该怎么做吗？

【问题讨论】：

是的，每次点击后将值存储在服务器上。另外，为什么 jQuery 标记，我没有看到。
向脚本发送 ajax 请求，将每个计数添加到数据库中。
您必须将点击次数保存在您的服务器上，并添加验证/超时以确保有人不会将其增加 1000000 次
只要 js 是“客户端大小”，你就不能只保存 un JS 的数字。您需要将其保存在服务器上，例如通过 ajax。单击时，客户端向服务器上的 php 文件发起 ajax 请求，并且此 php 文件“写入”数量增加：例如在 SQL 数据库中的文本文件中
你能给我一个@PierreGranger的例子吗？谢谢！

标签： javascript php

【解决方案1】：

这里有一个工作简单的例子，将计数器写在一个简单的 txt 文件中（不需要 sql db）

<?php

    $counterFile = 'counter.txt' ;

    // jQuery ajax request is sent here
    if ( isset($_GET['increase']) )
    {
        if ( ( $counter = @file_get_contents($counterFile) ) === false ) die('Error : file counter does not exist') ;
        file_put_contents($counterFile,++$counter) ;
        echo $counter ;
        return false ;
    }

    if ( ! $counter = @file_get_contents($counterFile) )
    {
        if ( ! $myfile = fopen($counterFile,'w') )
            die('Unable to create counter file !!') ;
        chmod($counterFile,0644);
        file_put_contents($counterFile,0) ;
    }

?>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            jQuery(document).on('click','a#download',function(){
                jQuery('div#counter').html('Loading...') ;
                var ajax = jQuery.ajax({
                    method : 'get',
                    url : '/test.php', // Link to this page
                    data : { 'increase' : '1' }
                }) ;
                ajax.done(function(data){
                    jQuery('div#counter').html(data) ;
                }) ;
                ajax.fail(function(data){
                    alert('ajax fail : url of ajax request is not reachable') ;
                }) ;
            }) ;
        </script>
    </head>
    <div id="counter"><?php echo $counter ; ?></div>
    <a href="" id="download" onclick="window.open(this.href);return false;">Download btn</a>

【讨论】：

出于安全原因，文件应修改为 644 而不是 777，并与 .htaccess 一起隐藏以防窥探。 ;)
谢谢，已编辑为 644 ;) 对于 htaccess，我不想让它更复杂，它只是一个可读文件。
不客气 (de rien) 皮埃尔。没必要把它弄得更复杂，我只是指出来。 OP 可以谷歌其余的 ;)
点击download btn后出现此错误：ajax失败：无法访问ajax请求的url
@codek 如果您仍在使用 url : '/test.php', 并且尚未将其更改为服务器上的 URL，那么您将需要执行类似 url : 'test.php', 的操作（如果它位于同一文件夹中） , 或 url : '../test.php', 如果它是一个子文件夹。执行/file.php 通常不起作用，需要完整的服务器路径，例如/var/user/you/public_html/folder/file.php

【解决方案2】：

您需要一个数据库连接来执行此操作。

当任何用户单击按钮时，假设“downloaded_times”的值将增加 1。

所以你需要这样的查询：

UPDATE table SET downloaded_times = downloaded_times + 1

每次有人按下按钮时都会调用此查询。

如果你想显示它，在某个用户想要开始下载之前，你只需从数据库中获取结果并回显它。你可以做更多，如果你希望该字段不断刷新，获取和回显部分应该在一个名为 PHP 函数的 ajax 中，它将每 30 秒左右刷新一次 div（例如）：D

希望这会有所帮助！ :D

【讨论】：

如果有多个列，则需要 WHERE 子句才能正常工作。
当然，如果 OP 有超过 1 个文件，那么他应该使用 WHERE 子句，在该子句上他应该通过 file_id 匹配它们，但他说：“我正在尝试这样做是为了记录一个文件被下载了多少次。”
一个表只有一列并且我们不知道 OP 的表包含多少列通常很少但不是唯一，因此最好添加附加信息。 OP 站在后面说：“我的所有列都已重置为 1” ;) 只是点缀 i 并穿过 t。