2

私は JavaScript について何も知りませんが、サイトの見栄えを良くするために、いくつかの場所で JavaScript を使用しています。これらの場所の 1 つは、ユーザーが div をクリックすると、見栄えの良いポップアップを開いて詳細情報を表示できる場所です。ただし、div のクリック数も保存したいと考えています。

私はphpでこれを行う方法を知っており、変数をインクリメントできるjavascriptコードを見つけることができましたが、jsがvarをCookieとして保存しない限り、これら2つを組み合わせることができないと思います。 js 変数をデータベースに読み込んでいると、セキュリティ上の欠陥が生じる可能性があります。

私が持っているJavaScriptコードは

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

私はjavascriptを知らないので、phpをどこから始めればよいかわかりません。ただし、クリック数を格納する列をインクリメントするためにデータベースにクエリを実行するのは簡単です。javascriptを使用してクリックが行われたことを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>

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();
}
?>
于 2013-02-16T14:41:03.867 に答える