2

我希望在我的网站上使用计数器，因此当有人单击某些按钮时，它会向计数器添加 +1。我想要它，这样当您刷新页面时，数字保持不变，而当不同的用户单击该按钮时，它只会向计数器添加 +1。

这可能吗？我对 Javascript 和 Jquery 还很陌生，所以如果你能解释清楚，那就太好了。

提前致谢。

4

1 回答 1

2

使用 AJAX 和 PHP 与服务器上的文件进行通信：

（将此代码保存在文件中index.php，您就可以开始了！）

可能有一种更简单的方法，但我将向您展示如何使用AJAX（n* o page refresh *）和PHP来实现，这将允许您使用 JS 中的计数器值做任何您想做的事情。

提供的 PHP 不是世界上最安全的，但可能足以满足您的需求。counter.txt如果您的服务器文件夹中没有文件（与 index.php 文件的路径相同），它将自动创建一个名为的文件。

通过单击任何button元素（您可以更改 jQuery 选择器），AJAX get 将从文件中读取存储在文件中的当前值，然后发送一个递增的计数器值。

<?php
$file = 'counter.txt';
// CREATE FILE
if(!file_exists($file)){
    $create = fopen($file, 'w') or die("Could not create the counter database.");
    file_put_contents( $file , '0' );
    fclose($create);
}
// WRITE FILE
if( isset($_POST['count']) ){
    $msg = htmlentities(strip_tags($_POST['count']), ENT_QUOTES);
    file_put_contents($file, $msg);
}
?>


<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Flat-File db counter with PHP and AJAX by roXon</title>
</head>
<body>

<button>click me</button> 
<button>click me too!</button> 
refresh the page , the counter should be memorized from our auto-generated database file! ;)
<br><b></b>

<script>
    function addCount( newCounterValue ){
        $.ajax( {
            type: "POST",
            data: {count : newCounterValue},
            cache: false,
                    async: false,
            success: function() {
                $('b').append('<br>Succesfully sent: '+ newCounterValue);
            }
        });
    }
    $(function(){
        $('button').click(function(){       
            $.get('counter.txt', function(data) {
                // READ
                var counter = parseInt(data, 10) || 0;
                $('b').html('Retrieved counter from database = '+ data);
                // SEND
                addCount( ++counter ); // send preIncremented COUNTER
            });     
        });
    });
</script>

</body>
</html>

客户端解决方案（其他用户将无法使用！）将使用 HTML5localStorage

LIVE DEMO

var counter = localStorage.getItem('counter') || 0;

$('button').click(function(){
     localStorage.setItem('counter', ++counter);
     alert(counter);
});

注意这只是客户端。您可以查看 PHP 如何动态创建文件并将该值发送到该文件中。单击时，我建议您使用 AJAX 联系该文件并在使用 PHP 更新它之前读取当前值。

于 2013-03-04T23:54:57.607 回答