VPF::Учет кликов по ссылке с дополнительными значениями

Another

Дата 17.11.2012, 15:55 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

Есть ссылка:

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

Только на 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;     
    });

});

Это сообщение отредактировал(а) Sanchezzz - 17.11.2012, 16:15

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

Amphiluke

Дата 17.11.2012, 19:15 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

@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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

Цитата

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

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

Sanchezzz

Дата 17.11.2012, 21:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

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

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

Код


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

Это сообщение отредактировал(а) Sanchezzz - 17.11.2012, 21:15

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

Another

Дата 18.11.2012, 00:06 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

Всё не то

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

Код


<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 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

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

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

Код


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

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

Amphiluke

Дата 18.11.2012, 14:22 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Цитата(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

Это сообщение отредактировал(а) Amphiluke - 18.11.2012, 14:40

Another

Дата 18.11.2012, 15:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

Цитата

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

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

Aliance

Дата 19.11.2012, 10:12 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Sanchezzz, так короче

Код


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

Это сообщение отредактировал(а) Aliance - 19.11.2012, 10:12

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »