tomohirof回答ポイント 200pt

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

a-kuma32015/08/12 14:14:04
満足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>

スター

1件のコメントを見る
tomohirof 2015/08/22 09:35:25

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

スター

javascriptに関する質問です。

ベストアンサー

a-kuma32015/08/12 14:14:04
満足200pt

tomohirof 2015/08/22 09:35:25

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

javascriptに関する質問です。

ベストアンサー

a-kuma32015/08/12 14:14:04 満足200pt

tomohirof 2015/08/22 09:35:25

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32015/08/12 14:14:04
満足200pt