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>

クライアント側のソリューション (他のユーザーは利用できません! ) は HTML5 を使用します。localStorage

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 に答える