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を呼ぶことができますでしょうか。。。



回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2015/08/19 13:10:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント200pt

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

  • 名前空間を汚さない
  • click のイベントハンドラは、ページを表示したときにスクリプトでぶら下げる

というようなことを意識してみました。
どちらもクリックのイベントハンドラを 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>
id:tomohirof

欲しい内容、そのモノでした!
ありがとうございます!!
(ご返信遅れてしまってすいません。。)

2015/08/22 09:35:25

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません