0

На нескольких элементах выбранных по классу, висит обработка клика. По нему происходит AJAX запрос с параметрами, полученными из атрибутов кликнутой ссылки.

Возникла необходимость в некоторых ситуациях выполнять ряд дополнительных действий по завершению AJAX запроса. Как бы это реализовать, товарищи? Можно, конечно, вставить ряд условий, смотреть, откуда пришёл клик, и делать-не делать доп. действия.

Но можно ли сделать это плагином? Повесить по классу на все ссылки, по умолчанию будет отрабатывать, как было. А если надо вмешаться, вешать плагин по ID и передавать доп. параметры и функции, вызываемые до/после AJAX запроса.

Сам плагины не писал, имею лишь образное представление, как это делается.
Буду признателен за помощь и разъяснения.

2 ответа 2

1

Где-то месяц назад я делал пример реализации на вопрос, который косвенно пересекается с вашим. Я его не комментировал, поэтому вкратце опишу тут. Есть (в примере) три кнопки, по клику на которые выполняется Ajax-запрос, отправляя какие-то данные (берутся из атрибута data-id), после успешного завершения запроса, выполняется действие, определённое в другом атрибуте - data-act. Вся обработка этих действий выполняется в заранее созданном объекте. Если нужно добавить N-ю кнопку, то, по сути, надо только дописать в объект очередную функцию и её имя записать в атрибут data-act.

P.S. Не обращайте внимание на то, как я подготавливаю данные для Ajax-запроса или параметры beforeSend, complete и прочее. Это только для работы в песочнице и для наглядности.

Обновление

недостаток в том, что все плюшки доступны только по успешному завершению ajax запроса

Вы хотите, чтоб в случае ошибки ваш callback всё равно выполнялся? )) Например, добавляем комментарий, произошла ошибка и благодарим за "успешный" отзыв? ))

выглядит громоздким

Видимо, вы не работали над большими проектами. Как бы вы ни хотели, но если нужно выполнять уникальное действие после запроса, то так или иначе, но придётся писать под него функцию. Набор этих функций может быть и в виде плагина, и в виде объекта. И универсальность - подразумевает сведение одинаковых действий к минимуму.

5
  • Интересное решение, спасибо, возьму на заметку, точно пригодится где-нибудь. Однако, его недостаток в том, что все плюшки доступны только по успешному завершению ajax запроса. Можно помудрить, конечно, и развить тему, добившись нужного эффекта, но подобное решение выглядит громоздким. Внешняя универсальность превратится в постоянно обслуживаемый кусок кода. Посмотрим, может, кто ещё чего подскажет.
    – hcuser
    23 ноя 2014 в 12:46
  • Обновил ответ
    – Deonis
    23 ноя 2014 в 14:27
  • Согласен со всем вышеизложенным. Но поясню. Сейчас по клику выполняется определённый функционал, который можно считать универсальным. Я же хочу расширить функционал в определённы случаях, внешне это могло бы выглядеть как-то так: $('.element').click(function() { //это действия для всех случаев CommonFunction(); }) $('#element1').myPlugin({afterAjax: function() { //это уникальное действие, которое выполняется после Ajax запроса //в CommonFunction } }); function CommonFunction() { //тут AJAX запрос(ы), прочий функционал //и проверка, есть ли запросы на уникальные действия
    – hcuser
    24 ноя 2014 в 11:16
  • Проблема в том, что у меня нет достаточно знаний и понимания того, как работает JQ, чтобы оценить, возможно ли подобное решение.
    – hcuser
    24 ноя 2014 в 11:16
  • @hcuser, не очень понимаю, в чём вы видите сложность. Вот еще [допотопный пример][1], который (возможно, хотя не уверен) поможет разобраться. Только не цепляйтесь взглядом за классы, на которые я ориентирую в примере, т.к. способ реализации зависит от вашей фантазии и условий задачи. [1]:jsfiddle.net/a9m9bch9
    – Deonis
    24 ноя 2014 в 12:53
0

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

Раз такая необходимость возникла, значит необходимо как-то определять, на каком из однотипных (выбранных по классу) элементов это действие должно быть, и непосредственно сами действия.

В код элемента дописывается data-атрибут, в котором может содержаться идентификатор действия вызываемого по завершении AJAX-запроса. В JS-коде можно создать объект, содержащий парами ключ-значение наименование идентификатора и соответствующую функцию:

var afterAJAX = {
  'action1' : function(){ // some actions},
  'action2' : function(){ // other actions}
}

Если вы используете jQuery, то у метода $.ajax есть коллбэк complete, который выполняется при любом результате AJAX-запроса.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.