从 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!
忽略从服务器吐出的添加代码....该死的免费主机