2

我对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 文件，该文件首先处理所有这些然后重定向，这在这种情况下不起作用，因为弹出窗口不会加载到新页面中.

有什么想法或伪代码可以提供帮助吗？

4

1 回答 1

0

如果你想在服务器端保持计数器是最新的，你应该使用 AJAX 来更新服务器数据库。

基于本教程，这里有一个简单的例子：

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>

计数.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();
}
?>
于 2013-02-16T14:41:03.867 回答