OPから、このデータを保持してすべてのユーザーに蓄積するように見えるため、サーバー側のコンポーネントが必要です。
これが私の見解です:
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<div id="p">Click here</div>
<div id="results"></div>
<script>
$('#p').click(function()
{
$.ajax("count.php", {
complete: function(jqXHR, status) {
$("#results").text(jqXHR.responseText);
}
})
});
</script>
</body>
</html>
PHP
<?php
$clicks = intval(file_get_contents("clicks.txt"));
$clicks++;
$fp = fopen("clicks.txt", "w+");
fwrite($fp, $clicks);
fclose($fp);
//give the count to the user
echo "result: $clicks";
PHP は同じですが、ファイルから取得した後、$clicks の値を整数に変更しています。
また、ファイルがサーバーに対して読み取り/書き込み可能であることを確認する必要があります... Linuxでは、これを行うだけです:
sudo chown -R www-data:www-data /var/www
sudo chmod -R g+rw /var/www
ディレクトリを作成するwww/
(またはApache(?)サーバーが使用するディレクトリに変更する..)サーバーによる読み取り/書き込み可能にする(これはやり過ぎかもしれません。同じ方法を使用して特定のファイルをターゲットにすることができます。-R
(再帰)フラグを削除するだけです)。
このセットアップをローカルでテストしたところ、うまくいきました。
編集:ちょうどいいです....
これは、JS に対する jQuery を使用しないソリューションです (これは、すべてのブラウザー、特に古い IE バージョンでは機能しません。これらを処理できるようにします :P )
var p_btn = document.getElementById('p'),
results = document.getElementById('results');
p_btn.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET','count.php',false);
xhr.onreadystatechange = function() {
if( xhr.readyState === 4 && xhr.status === 200 ) {
while(results.hasChildNodes()) {
results.removeChild(results.lastChild);
}
results.appendChild(document.createTextNode(xhr.responseText));
}
}
xhr.send();
}, false);
// enjoy!
サーバーから吐き出される追加コードは無視してください... いまいましい無料のホスト