X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> SAR - простая работа с ajax запросами
fedornabilkin
fedornabilkin
Topic Starter сообщение 5.12.2017, 18:12; Ответить: fedornabilkin
Сообщение #1


Здравствуйте.
Вступление можно не читать.
Много и очень много раз я встречал сайты, на которых используется 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 на сайт и кастомизировать под нужды конкретной ситуации.

На момент написания этой темы скрипт находится в процессе доработки. В планах добавить загрузку файлов с индикатором.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ixman
ixman
сообщение 5.12.2017, 19:15; Ответить: ixman
Сообщение #2


Не смотрел что там, но за работу и за то, что поделился + однозначно
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
Topic Starter сообщение 12.12.2017, 22:54; Ответить: fedornabilkin
Сообщение #3


Что, еще не нашелся смельчак для теста скрипта?
Маленько обрадую вас. Сегодня добавил загрузку файлов на сервер с индикатором передачи файла. Версию еще не релизнул, но посмотреть можно в ветке dev-master (ссылка в старт-посте).
Буду очень рад, если кто-нибудь протестирует скрипт. Возможно он некорректно работает в разных браузерах.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 12.12.2017, 23:29; Ответить: ShowPrint
Сообщение #4


(fedornabilkin @ 13.12.2017, 01:54) *
Буду очень рад, если кто-нибудь протестирует скрипт
Я б затестил, но времени пока нет разбираться с учетом моего ламерского уровня и отношения к категории
(fedornabilkin @ 5.12.2017, 21:12) *
консерваторы еще не сжали яйца волю в кулак и не решились перейти на bootstrap'ину, им придется немного повозиться.
:(


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужна работа
0 filatd 706 12.1.2024, 17:08
автор: filatd
Открытая тема (нет новых ответов) Работа: Разная рутина
Работа, разные рутинные задачи: постинг / переговоры / поиск
1 ivanshargin 929 31.10.2023, 17:55
автор: ServersExpert
Открытая тема (нет новых ответов) Нужна удаленная работа
Нужна удаленная работа
0 filatd 990 12.9.2023, 11:40
автор: filatd
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44760 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Нужны тексты для сайта, работа на постоянку
6 danilchuk88 1582 19.3.2023, 0:53
автор: malamut


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:53
Дизайн