jQueryとPHPを使い、画面遷移せずに回すクリックカウンター

2011.1.12

jQueryとPHPを使い、画面遷移せずに回すクリックカウンターです。自分用メモ。

注意

動作を目的としているだけで、セキュリティ他で問題があるかもしれません。また、排他処理を行っていないため、膨大なクリック数が一度にされると、テキストファイルが壊れる可能性があります。

はじめに

• jQueryとphpを使い、画面遷移せずにまわすカウンターを作る
• カウンター情報は、テキストファイルに保存している（ここではcount01.txt）
• phpの動作する環境が必要

ファイル構成

]

index.html

いいね！

• btn01というidでボタンがクリックされたり、カウントを表示したりするための判断を行います。
• 12行目にある、spanの空要素部分にカウンター数字が入る

count.js

動作については、コメントとして記載した通り。

jQuery(document).ready(function(){
    //初期時のカウンターファイル読み込み
    //同じファイル名だと正常に読み込めないので、ランダムな数字を生成し、パラメータとして付けることで、ユニークな状態にしている。
    var randnum1 = Math.floor( Math.random() * 10000 ); 
    jQuery("#btn01 span").load("./count01.txt?r=" + randnum1);  
//カウンター追加後の読み込み関数
function func01(data){
    var randnum1 = Math.floor( Math.random() * 10000 );
    jQuery("#btn01 span").load("./count01.txt?r=" + randnum1);
}

//カウンター＋1追加処理
jQuery('#btn01 p').click(function(e){
    //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行
    jQuery.post("post.php" , {"param1": 'count01.txt'} , func01);
    jQuery("#btn01 span").load("./count01.txt");
});
});
post.php
ファイルにカウント数字を書き込んでファイルを閉じるだけ。（排他処理などをおこなっていないので、扱いに注意）

count01.txt
書き込み属性を設定し、半角数字で「0」と入力しておきます。（任意に数字にしても可）
サンプルダウンロード
サンプルダウンロード（利用は自己責任ですよ）
※2011/01/13 サンプル公開をやめ、ダウンロードの形に変更しました
最後に
正常に動かない場合は、パーミッションの設定に問題がある事が多いです。