人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptに関する質問です。

ページ内のリンクをクリックした回数をDBに記録したいと考えています。
PHPで、DBに記録するプログラムを事前につくっておいて、それをJavascriptで呼ぶ形を想定しています。

※ DBに記録用のphp
count.php?id=xxxxx&hoge=hoge

---
aタグの中に、clickのイベントを用意し、そのJavascriptの中で、その記録用のURLが呼ばれればよく、記録用のURLに遷移する必要はありません。

function count(){

// この中に、以下のURLを呼ぶ記述??
count.php?id=xxxxx&hoge=hoge
}

<a href="xxxxx.html" onclick="count">リンク</a>

---

説明がたりず申し訳ありませんが、どのように記述すれば、JS内で特定URLを呼ぶことができますでしょうか。。。





●質問者: tomohirof
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●200ポイント ベストアンサー

リンクをクリックされたときのイベントで、いわゆる Ajax で使われる XMLHttpRequest を使うか、JSONP で使われる script タグの埋め込みを使うことになると思います。
きっとクリック数をカウントしたいページはたくさんあると思うので、

というようなことを意識してみました。
どちらもクリックのイベントハンドラを A タグにぶら下げて、イベントハンドラで href 属性から id を切り出すところまでは同じです。

XMLHttpRequest を使う場合は、こんな感じ。

<script>
(function() {
 var countUp = function(a) {
 var match = /.*\/([^/]+)\.html/.exec(a.href);
 if (match) {
 var url = "count.php?id=" + match[1] + "&hoge=hoge";
 var xhr = new XMLHttpRequest();
 xhr.onload = function() {
 // NOP
 };
 xhr.open("GET", url);
 xhr.send();
 xhr = null;
 }
 };
 window.addEventListener("load", function() {
 Array.prototype.forEach.call(document.getElementsByTagName("a"), function(a) {
 a.addEventListener("click", function(ev) {
 countUp(ev.target);
 });
 });
 });
})();
</script>

...
<a href="aaaaa.html">aaaaa</a>
<a href="bbbbb.html">bbbbb</a>

script タグの追加を使う場合は、こんな感じ。

<script>
(function() {
 var countUp = function(a) {
 var match = /.*\/([^/]+)\.html/.exec(a.href);
 if (match) {
 var url = "count.php?id=" + match[1] + "&hoge=hoge";
 var e_script = document.createElement("script");
 e_script.src = url;
 document.body.appendChild(e_script);
 }
 };
 window.addEventListener("load", function() {
 Array.prototype.forEach.call(document.getElementsByTagName("a"), function(a) {
 a.addEventListener("click", function(ev) {
 countUp(ev.target);
 });
 });
 });
})();
</script>

...
<a href="aaaaa.html">aaaaa</a>
<a href="bbbbb.html">bbbbb</a>

tomohirofさんのコメント
欲しい内容、そのモノでした! ありがとうございます!! (ご返信遅れてしまってすいません。。)
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ