Question

我对javascript一无所知，但我在我的网站上的几个地方使用javascript让它看起来更好一些。其中一个地方是当用户点击div时，它可以打开一个包含更多信息的漂亮外观。但是，我还想保存div的点击次数。

我知道如何使用php完成此操作，并且我设法找到一些可以增加变量的javascript代码，但我不认为这两个可以合并，除非js将var保存为cookie，如果我将js变量读回数据库，我认为可能存在一些安全漏洞。

我的javascript代码是

/*Click counter*/
var clicks = 0;
function count() 
{
    document.getElementById( "cc" ).value = ++clicks;
}

我不知道从哪里开始使用php，因为我不知道javascript。但查询数据库以增加存储点击次数的列将很简单。我只是不知道如何告诉php使用javascript进行点击。我不认为它可以在php中完成，除非链接转到一个php文件，它首先处理所有这些然后重定向，这在这种情况下不起作用，因为弹出窗口不会在新页面中加载

任何想法或伪代码都有帮助吗？

Answer 1

如果要在服务器端使计数器保持最新，则应使用AJAX更新服务器数据库。

基于this tutorial，这是一个简单的例子：

mydiv.phtml：

<?php $_GET['id']=isset($_GET['id'])?$_GET['id']:1; include 'count.php'; ?>
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
var clickerid = <?php echo $_GET['id'] ?>; //counter id allows easy implementation of other counters if desired
var clicks = <?php echo $clicks ?>;
var clickLock = false;
var maxClickRate = 1000; //maximum click rate in ms, so the server won't choke
//Browser Support Code
function count(){
 if (clickLock) { 
     alert('you\'re clicking too fast!'); 
     return;
 }
 clickLock=true;
 setTimeout('clickLock=false;',maxClickRate);
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      document.getElementById('cc').innerHTML = ++clicks;
   }
 }
 // Now pass clicks value to the
 // server script.
 var queryString = "?id=" + clickerid + "&update=true";
 ajaxRequest.open("GET", "count.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
//-->
</script>
<div onclick='count()'>
<form name='myForm'>
<input type='button' value='clickOnDiv'/>
</form>
</div>
Clicks so far: <span id='cc'><?php echo $clicks; ?></span>
</body>
</html>

count.php：

<?php
try {
    $dbh = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
    if (!isset($_GET['update'])){
        $stmt = $dbh->prepare('SELECT count
        FROM clicks
        WHERE id = :clickerid');
        $stmt->bindValue(':clickerid', $_GET['id'], PDO::PARAM_INT);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        $clicks = $result['count'];
    } else {
        $stmt = $dbh->prepare('UPDATE clicks
        SET count = count + 1
        WHERE id = :clickerid');
        $stmt->bindValue(':clickerid', $_GET['id'], PDO::PARAM_INT);
        $stmt->execute();
    }
    $dbh = null;
} catch (PDOException $e) {
    print "PDO Exception.";
    die();
}
?>

set_database.php：

<?php
try {
    $dbh = new PDO('mysql:host=localhost', 'user', 'password');
    $dbh->query('CREATE DATABASE test;');
    $dbh->query('CREATE TABLE test.clicks (id INT KEY, count INT);');
    $dbh->query('INSERT INTO test.clicks VALUES (1,0);');
    $dbh = null;
} catch (PDOException $e) {
    print "PDO Exception.";
    die();
}
?>

使用php在div上单击计数器

1 个答案: