Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Учет кликов по ссылке с дополнительными значениями

Автор: Another 17.11.2012, 15:55

Есть ссылка:

Код


<a href="http://test.test/" data-text="text" data-num="1">ancor</a>

Нужно что бы при клике по этой ссылке отправлялся пост-запрос на php файл для учета кликов и передавал значение href, data-text, data-num и анкор ссылки.
Как такое осуществить? Желательно без использования библиотек.

Автор: Sanchezzz 17.11.2012, 16:14

Только на Jquery (время деньги)

онлайн тест http://jsfiddle.net/N9etW/ ( навряд ли будет работать и за политике безопасности)

Код


<a href="http://test.test/" data-text="text" data-num="1">ancor</a>

Код


// запихнем все это в отдельную область видимости...
$(function(){
    
//вешаем событие на все ссылки с атрибутом data-text.
    $('a[data-text]').click(function(e){
    var _this = $(this), 
        href = _this.attr('href'),
        text = _this.attr('data-text'),
        num  = _this.attr('data-num');
        
        // Аякс запрос
        $.ajax({
            url:'/скрипт.php',  // урл куда.
            type:'post',     // тип отправки 
            dataType:'html', // тип ответа пд. см доку.
            data:{num:num,text:text,href:href}, // пост данные
            success:function(m){
                // пришел ответ делаем перенаправление
                document.location.href = href;
                return true;
            },
            error:function(a,b,c){
                alert('сервер не смог отослать запрос' + a +' ' + b + ' ' + c);
                    
            }
                
        
        });
        return false;     
    });

});

Автор: Amphiluke 17.11.2012, 19:15

@Another
А для чего это делать методом POST?

@Sanchezzz

Цитата(Sanchezzz @ 17.11.2012, 20:14

)

Код


//вешаем событие на все ссылки с атрибутом data-text.

В общем случае было бы лучше создать единый обработчик, делегировав обработку события общему для всех ссылок контейнеру (например, body). Особенно если ссылок с атрибутом data-text может быть много.
Да, и еще одно. Делать return false из jQuery-обработчика события не всегда хорошо, поскольку это отменяет дальнейшее распространение события вверх по дереву DOM (.stopPropagation()), что исключает возможность другим делегирующим обработчикам обработать событие. Если намеренно не планируется запрет дальнейшего всплытия события, лучше просто отменить действие по умолчанию методом .preventDefault()

Автор: Another 17.11.2012, 20:00

Цитата

А для чего это делать методом POST?

А, собственно, все-равно. Можно и GET

Автор: Sanchezzz 17.11.2012, 21:15

Amphiluke, знаю что лучше использовать event.stopPropagation() я честенько про него забываю).

а событие повесил на все ссылки с атрибутом иза того что больше некчему было прицепится можно конечно было с делать с проверкой значения

Код


$(a[data-text="text"]).click(function(event){
event.stopPropagation();
//..
});

Автор: Another 18.11.2012, 00:06

Всё не то

Упростим задачу.

Код


<a href="http://test.test/" data-text="text">ancor</a>
либо <a href="http://test.test/" onclick="...(text)">ancor</a>

При клике - отправить GET или POST запрос на файл click.php?click=text

Автор: Amphiluke 18.11.2012, 10:06

Цитата(Sanchezzz @ 18.11.2012, 01:15

)

знаю что лучше использовать event.stopPropagation()

В данном случае .preventDefault(), а не stopPropagation() smile

Another, в простейшем случае с GET-вариантом запроса и с отсутствием необходимости дожидаться ответа от сервера, можно, к примеру, сформировать динамический элемент img и указать все эти параметры в его атрибуте src, как делается в распространенных эвент-трекерах.

Код


<a href="http://test.test/" data-text="text">ancor</a>
<script type="text/javascript">
(function () {
    function clickTrack(e) {
        if (!e) e = event;
        var target = e.target || e.srcElement,
            dataText;
        if ((target.nodeName.toLowerCase() == "a") && (dataText = target.getAttribute("data-text"))) {
            (new Image()).src = "click.php?click=" + encodeURIComponent(dataText);
        }
    }

    if (document.body.addEventListener) {
        document.body.addEventListener("click", clickTrack, false);
    } else {
        document.body.attachEvent("onclick", clickTrack);
    }
})();
</script>

Автор: Another 18.11.2012, 12:45

Почему-то вышепривеенный пример не сработал. к click.php вообще не было обращения...

Добавлено через 7 минут и 23 секунды
Придумал одно из простейших решений данной проблемы:

Код


<a onclick=\"document.location='/clicks.php';\" href=\"#\" data-text=\"text\" target=_blank>

а этот самый clicks.php потом обратно редиректит человека на предыдущую страницу.
это как вариант.
Но хотелось бы еще увидеть что-то покрасивее.

Автор: Amphiluke 18.11.2012, 14:22

Цитата(Another @ 18.11.2012, 16:45

)

click.php вообще не было обращения...

Наверное, что-то сделали не так, у меня все работало. В примере адрес скрипта click.php считался не от корня сайта (т.е. без начального слэша. Возможно, поэтому). Сетевую активность удобно отслеживать через отладчик в браузере (Firebug, Developer tools и т.д.), там можно увидеть, что не так.
Можно еще попробовать добавить к GET-запросу случайный параметр или timestamp — для избежания кэширования.

Код


(new Image()).src = "/click.php?click=" + encodeURIComponent(dataText) + "&t=" + (new Date()).valueOf();

Цитата(Another @ 18.11.2012, 16:45

)

а этот самый clicks.php потом обратно редиректит человека на предыдущую страницу.

Ужас какой, простите. smile

Автор: Another 18.11.2012, 15:24

Цитата

В примере адрес скрипта click.php считался не от корня сайта (т.е. без начального слэша. Возможно, поэтому).

Проверял и так и эдак.

Автор: Aliance 19.11.2012, 10:12

Sanchezzz, так короче

Код


// text = _this.attr('data-text'),
text = _this.data('text'),