Вместо ссылки — ajax?

Question

[Влад Зайцев]

Вот у меня на странице есть ссылка.

<a href="?channel=5&command=on">Включить</a><br>

Как мне проще всего преврать ее в ajax, т.е. сделать запрос без перезагрузки страницы? Результат можно не возвращать.

Comments

[Алексей Фирсов]

Вы хотите сделать ajax запрос, или вы хотите проверить что передается при ajax запросе?

[Влад Зайцев]

Только запрос.

Answer 1

[TheMengzor]

Помечаете ajax ссылки классом, например, .ajax, затем колбасите следующее:

$(function()
{
    $('body').on('click', 'a.ajax', function(event) // вешаем обработчик на все ссылки, даже созданные после загрузки страницы
    {
        event.preventDefault(); // предотвращаем штатное действие, то есть переход по ссылке
        $.get($(this).attr('href'), function(data) // отправляем GET запрос на href, указанный в ссылке
        {
            console.log(data); // выводим полученные данные в консоль.
        };
    };
});

На сервере в обработку запроса вложите условие с проверкой на XMLHttpRequest, поскольку ajax запросы имеют HTTP заголовок, сообщающий о том, что это XMLHttpRequest, и отдавайте для запросов с этим заголовком необходимые именно для ajax ответы, а для всех остальных — обычный ответ.

Comments

[Артем Спиридонов]

Лучшее решение.

[Влад Зайцев]

<script type="text/javascript">
$(function()
{
    $('body').on('click', 'a.ajax', function(event) // вешаем обработчик на все ссылки, даже созданные после загрузки страницы
    {
        event.preventDefault(); // предотвращаем штатное действие, то есть переход по ссылке
        $.get($(this).attr('href'), function(data) // отправляем GET запрос на href, указанный в ссылке
        {
            console.log(data); // выводим полученные данные в консоль.
        };
    };
});
</script>

<a href="?channel=5&command=on" class="ajax">Включить основной свет</a>

Правильно? Не работает, перезагружает страницу.

[TheMengzor]

Действительно, опечатался в 7 утра :) Забыл скобки закрывающие у двух функций:

<script type="text/javascript">
$(function()
{
    $('body').on('click', 'a.ajax', function(event) // вешаем обработчик на все ссылки, даже созданные после загрузки страницы
    {
        event.preventDefault(); // предотвращаем штатное действие, то есть переход по ссылке
        $.get($(this).attr('href'), function(data) // отправляем GET запрос на href, указанный в ссылке
        {
            console.log(data); // выводим полученные данные в консоль.
        }); // закряваем скобку :)
    }); // закрываем скобку :)
});
</script>

<a href="?channel=5&command=on" class="ajax">Включить основной свет</a>

[Александр Каплун]

TheMengzor: подскажи есть ссылка

<a href="/catalog/<?=$arElement["IBLOCK_SECTION_ID"]?>/?<?=$arParams["ACTION_VARIABLE"]?>=ADD2BASKET&id=<?=$OFFERS['ID']?>" class="ajax btn btn-primary buy_button" rel="nofollow" onclick="return addToCart(this, 'list', '<?=GetMessage("CATALOG_IN_CART")?>', 'noCart');" id="catalog_add2cart_link_<?=$OFFERS['ID']?>"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> В корзину</a>

почему может не работать

Answer 2

[Алексей Фирсов]

$(function () {
    $('a').click(function () {
       $.post('адрес обработчика к примеру aj.php', {add:'привет мир!'}, function (data) {
         alert(data)
       })
    })
})

в aj.php

echo $_POST['add']; exit;

не забудьте подключить jQuery

Comments

[Алексей Фирсов]

либо можно гетом, тогда нужно вот так

$.post('aj.php'+$(this).attr('href'), {}, function (data) {

[Алексей Фирсов]

сори если гетом то $.get, а если постом то соответственно $.post

[Влад Зайцев]

а передаваемые параметры так и останутся в ссылке? которые ?channel=5&command=on

[Алексей Фирсов]

$(this).attr('href') мы берем параметры ссылки, на которую кликнули и прикрепляем их к aj.php
Если ссылка в href содержит ?channel=5&command=on то запрос будет выглядеть так aj.php?channel=5&command=on, воде то что нужно, в переменную data попадет ответ от php скрипта.

Answer 3

[esenin]

Лучше конечно превратить ссылку в Ajax-ссылку.

Это делается путем добавления атрибута attr-href:

var a = $('a');
(function () {
  a.attr("attr-href", a.attr('href'))
    .attr("href", "javascript:;")
    .on("click.ajax", function (event) {
      var link = a.attr("attr-href");
      $.ajax(link, ....);
      return false;
    });  
}());

Если JS отключен, работать будет через перезагрузку страницы. Если включен — через XHR.