Как сделать ajax запрос до выполнения перехода по ссылке?

Question

[DamskiyUgodnik]

Всем привет!
Есть задача, отследить нажатие на определённые ссылки на странице и записать данные по этим нажатиям в хранилище.

Предполагаемый сценарий:

• Загружается документ
  
• Выбираем необходимые элементы (например по классу)
  
• Вешаем на них обработчик
  
• При нажатии на ссылку, собираем необходимые данные (на какой элемент нажали, координаты клика и т.д.)
  
• Отправляем данные на сервер (через Ajax)
  
• Происходит переход по ссылке
  

Проблема в том, что запрос не отрабатывает (переход по ссылке происходит раньше). Подозреваю, что есть какая-то хитрая магия для решения этой задачи. Возможно есть какой-то вариант сделать так, чтобы переход происходил после выполнения Ajax запроса. К сожалению JS не мой конёк.

Дополнительно:

• Отслеживать переход через конечную страницу ("прокидывая" get переменные, делая "прокладки" с редиректами и т.д.) не подходит, хочется сделать именно по описанному сценарию (так вроде делает метрика и аналитикс)
  
• Поведение при нажатии на ссылке не должно меняться (тут имеется в виду что ссылки долны нормально открываться в новом окне при нажатом ctrl и т.д.).
  

Пробовал делать штуки такого плана:

$(document).ready(function () {
   jQuery(".class_name a").click(function(){
      pushClickEvent(this);
      return false;
   });
});

function pushClickEvent(element){
    jQuery.ajax({
        type: "POST",
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response){
            window.location =  $(element).attr('href');
        }
    });
}

Но при таком решении появляются проблемы с открытием в новой вкладке, если делать window.open то вроде как это блокируется браузерами и решение не надёжное.

Answer 1

[generate]

window.open($(this).attr('href'), '_blank');

Так пробовали не ?

Answer 2

[Levkas]

После нажатия на кнопку вызывать функцию в котором асинхронный ajax выполняет необходимые Вам действия и если запрос успешный открывать ссылку какую вам надо.

function pushClickEvent(element){
    jQuery.ajax({
        type: "POST",
        async: true,
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response){
            window.location =  $(element).attr('href');
        }
    });
}

Comments

[Михаил Flat]

Асинхронный может не выполниться, нужно использовать синхронный

Answer 3

[ThunderCat]

...
jQuery(".class_name a").click(function(e){
      e.preventDefault();
      pushClickEvent(this);
...

Answer 4

[Tim]

не совсем понятно, что вы пытаетесь сделать, но перед отправкой ajax можно выполнить функцию
beforeSend — срабатывает перед отправкой запроса
error — если произошла ошибка
success — если ошибок не возникло
complete — срабатывает по окончанию запроса
https://habr.com/ru/post/42426/

function pushClickEvent(element) {
    jQuery.ajax({
        type: "POST",
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response) {
            //code
        },
        beforeSend: function(xhr) {
            //code
        }
    });
}

если в пределах одного сайта переходы, то данные между страницами можно сохранять в LocalStorage https://learn.javascript.ru/localstorage

Answer 5

[DamskiyUgodnik]

Спасибо всем за ответы, к сожалению всё таки пришлось делать через "прокидывание" метки в GET параметрах (так оказалось проще). Причина - в процессе исследования выявились сценарии в которых пользователи могут открывать ссылку к новом окне через контекстное меню и даже перетаскиванием ссылки в новую вкладку.