Перейти к содержимому


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 774 6 тем, 111 сообщений, 4 балла репутации

  • Фотография Mandarin
    #2

    Mandarin
    Очков активности: 570 3 темы, 86 сообщений, 4 балла репутации

  • Фотография TimurR
    #3

    TimurR
    Очков активности: 150 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 126 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 120 0 тем, 20 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 99 2 темы, 16 сообщений, 3 балла репутации

  • Фотография WGN
    #7

    WGN (worldgamenews.com)
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #8

    pozitron123
    Очков активности: 34.5 2 темы, 17 сообщений, 1 балл репутации

  • Фотография thisismyname
    #9

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

  • Фотография m3Re
    #10

    m3Re
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 13.12.2018
Топ 5 участников по репутации


SAR - простая работа с ajax запросами

#1 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193
0

Отправлено 05 December 2017 - 17:12

Здравствуйте.
Вступление можно не читать.
Много и очень много раз я встречал сайты, на которых используется ajax, а вот какого-то универсального решения не приходилось встретить. Может быть плохо искал, но тем не менее у меня давно назрела мысль сделать что-нибудь эдакое. Работал над одним проектом и там приходилось много раз писать одно и то же. Типа $.ajax... часто бывали косяки в коде, которые не относятся к отправке запросов и запросы не отправлялись из-за ошибки.
 
В итоге я созрел и получился довольно хороший скрипт.
https://github.com/fedornabilkin/sar
 
SAR зависит от css-фреймворка bootstrap 3.* версии, а он в свою очередь от библиотеки jQuery.
 
Кто уже оценил возможности пакетного менеджера bower, заморачиваться особо не стоит.
Подразумевается, что вы используете bootstrap и jQuery. Устанавливаем пакет, подключаем на страницу файл и добавляем немного кода:

<script src="/simple-ajax-requests/dist/sar.js"></script>
<script>
$('form[data-request="ajax"]').on('submit', function () {
    AjaxRequest($(this));
    return false;
});
</script>

 
Добавляем в форму атрибут и запросы отправляются с помощью ajax на указанный адрес.

<form action="/test.php" data-request="ajax">
    <input name="search" type="text">
    <button type="submit">Отправить</button>
</form> 

 Перед отправкой запроса, перед закрывающим тегом </form> добавляется div с прогресс-баром, который служит индикатором. После этого скрипт собирает данные из всех тегов с атрибутом name и отправляет на сервер. После обработки запроса, сервер должен вернуть json-строку с обязательным (хз как называется) ключом text. Выглядит так {text:"Строка ответа"}. После того, как придет ответ сервера, данные будут отображатся вместо прогресс-бара.

Если на странице разместить модалку с id="sar-simple", то прогресс-бар и ответ сервера будут отображены в модальном окне. Окно можно закрыть только по клику на "крестик". Иногда это полезно для того, чтобы пользователь обязательно ознакомился с ответом сервера.
 
Для любителей консервативного подхода тоже есть выход.
Сохраняем файл dist/sar.js на сайте, подключаем на страницах и добавляем код по такому же принципу, что описан выше. Так как консерваторы еще не сжали яйца волю в кулак и не решились перейти на bootstrap'ину, им придется немного повозиться.

Чтобы все заработало, необходимо создать свой обработчик и переопределить некоторые методы. В частности это loader и unloader. По сути их можно оставить пустыми, но в таком случае пользователь не увидит процесса отправки запроса и не получит ответ (иногда и такие случаи встречаются).

Вместо прогресс-бара можно добавить свой див со своим классом или даже со своей картинкой, которая будет изображать индикатор отправки запроса. Чтобы переопределить логику работы, создаем обработчик типа такого:

function CustomSar(element, data) {
    AjaxResponse.apply(this, arguments);
}
CustomSar.prototype = Object.create(AjaxResponse.prototype);
CustomSar.prototype.constructor = CustomSar;
CustomSar.prototype.loader = function() {
    this.element.append(<div class=loader"><img src="/img/loader.gif"></div>);
};
CustomSar.prototype.unloader = function() {
    this.element.find('.loader').html(this.resp.text);
}; 

И скажем, чтобы SAR использовал именно его (атрибут data-handler с названием обработчика, регистр имеет значение):

<form action="/test.php" data-request="ajax" data-handler="customSar">
    <input name="search" type="text">
    <button type="submit">Отправить</button>
</form>

Помимо методов loader и unloader есть возможность переопределить и другие полезные методы. Например метод prepareForm для валидации формы или метод after, который вызывается после получения ответа от сервера и вызывает метод unloader.

 

Данная тема не является инструкцией и является ознакомительной, так сказать прощупывание почвы. Скрипт писал исключительно для своих целей, но от сайта к сайту, от проекта к проекту он преобразовался таким образом, что теперь не стыдно показать другим вебмастерам. Если эта наработка будет актуальна, а тема интересна, я с радостью оставлю ссылку на гитхабе. В теме с удовольствием помогу внедрить SAR на сайт и кастомизировать под нужды конкретной ситуации.

 

На момент написания этой темы скрипт находится в процессе доработки. В планах добавить загрузку файлов с индикатором.


 

 

  • 2

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#2 Ixman

Ixman
  • Пользователь PRO
  • 2974 сообщений
  • Репутация: 775

Отправлено 05 December 2017 - 18:15

Не смотрел что там, но за работу и за то, что поделился + однозначно


  • 0


#3 fedornabilkin

fedornabilkin
    Topic Starter
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 12 December 2017 - 21:54

Что, еще не нашелся смельчак для теста скрипта?

Маленько обрадую вас. Сегодня добавил загрузку файлов на сервер с индикатором передачи файла. Версию еще не релизнул, но посмотреть можно в ветке dev-master (ссылка в старт-посте).

Буду очень рад, если кто-нибудь протестирует скрипт. Возможно он некорректно работает в разных браузерах.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3084 сообщений
  • Репутация: 850

Отправлено 12 December 2017 - 22:29

Буду очень рад, если кто-нибудь протестирует скрипт
Я б затестил, но времени пока нет разбираться с учетом моего ламерского уровня и отношения к категории

консерваторы еще не сжали яйца волю в кулак и не решились перейти на bootstrap'ину, им придется немного повозиться.
:(
  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/




Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru