Регистрация с использованием AJAX.


Содержание

Регистрация формы с использованием Ajax

В настоящее время у меня есть страница.php (вид) (которая содержит в основном html-код), которая содержит форму для входа и форму для регистрации. В действии форм я имел вызов файла.php (публичный файл), который создает экземпляр конкретного контроллера для обработки ввода двух форм. Этот контроллер берет данные, введенные пользователем, обрабатывает их, проверяет правильность данных и вставляет (вписывается в регистр) или выбирает (вход в регистр). Если есть ошибки, он передает эти строки ошибок в представление, которое печатает их на экране.

Теперь я хочу использовать Ajax (никогда не использовавшийся до сих пор, а пока немного читающий в Интернете, я почти ничего не понял), чтобы сделать их лучшей формой. Например, мне бы хотелось, чтобы Ajax управлял данными и печатал результаты (данные правильные или нет) асинхронно.

На данный момент я сделал это, но ничего, он не работает, он ничего не делает. Вы поможете мне?

Где функции checkLogin() и checkSignup() JavaScript? Существует checkSignup() в RegistrationController.php — также отправьте этот код.

Используйте Firebug в Firefox для отладки ошибок JavaScript с помощью вкладки консоли, а также вы можете проверить, работает ли XMLHttpRequest или нет на вкладке «Сеть» и на вкладке «XHR» для этого вам нужно включить Net для хоста.

  • Также вы можете использовать console.log для отладки, например console.log(‘Inside Ajax function’);

Используйте jQuery для AJAX вместо собственного JS, это было бы легко; включив jQuery на свою веб-страницу. Проверьте здесь документацию по функциям JQuery AJAX.

Как отправить HTML-форму без перезагрузки страницы

Что такое AJAX

При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.

Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.

Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax

Здесь мы создадим демо-проект, который будет включать в себя 3 файла:

index.php — это главная страница, на которой размещена сама форма

ajax.js — это файл javascript, в котором содержится алгоритм ajax для обработки формы

action_ajax_form.php — это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON

Создайте первый файл под названием index.php с таким содержимым:

Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.

Обратите внимание, что метод отправки формы у нас POST, задан . Также, после формы мы добавили div c >

Теперь создадим второй файл — ajax.js

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку «Отправить», слушатель срабатывает и вызывает метод sendAjaxForm.

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это id формы отправки сообщения и url — это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).

Создадим последний файл — action_ajax_form.php

action_ajax_form.php — это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.

Выводы

Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Форма регистрации в сайдбаре с помощью Login With Ajax

Здравствуйте, сегодня рассмотрим еще один плагин – Login With Ajax, позволяющий создать на сайте форму регистрации и входа пользователей в сайдбаре (или в другом месте вашего сайта), при этом у данного плагина есть возможность использовать технологию Ajax (то есть без обновления содержимого страницы).
Скачать исходники для статьи можно ниже

Плагин Login With Ajax более прост по сравнению с плагином Theme My Login, о котором я рассказывал вам в предыдущей статье, однако, он без проблем справится с упрощением процедуры регистрации новых пользователей на вашем сайте.

Особенности:

  • Вход под своим логином на сайт, регистрация, восстановление пароля без обновления содержимого сайта, так как используется Ajax технология.
  • Совместимость с WordPress, WordPress MU и BuddyPress (поддерживаются только логины BuddyPress, регистрация новых пользователей пока не поддерживается).
  • Перенаправлять пользователей при входе и выходе из своей учетной записи
  • Перенаправление пользователей при входе и выходе из своей учетной записи на основе их роли (пользовательские роли).
  • Возможность настройки оповещения – редактирование сообщения, которое отправляется пользователям при регистрации.
  • Наличие виджета.
  • Наличие шорткодов.
Илон Маск рекомендует:  Что такое код winhlp

Плагин Login With Ajax есть на wordpress.org:

Последняя версия плагина (на момент написания статьи): 3.0.4.1

Последнее обновление: 2012-5-7

Загрузок: 173,844 – хороший показатель!

Автор: NetWebLogic

Сайт плагина:

Плагин русифицирован, то есть если у вас панель управления на русском языке (русифицированный wordpress), то и настройки плагина будут на русском языке.

Установка плагина стандартная – заходим в панель управления сайтом, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строку поиска вводим Login With Ajax, устанавливаем и активируем плагин.


После чего в панели управления, в левом меню, в пункте “Настройки” (Параметры) у вас появится новый подпункт “Login With Ajax”, заходим в него и видим следующее:

Настроек поменьше, нежели в плагине Theme My Login.

Все настройки можно оставить по умолчанию! – то есть не нужно ничего менять, все будет работать отлично!

Параметр “Выключить обновление страницы при входе” – включает технологию Ajax. Если будет плохо работать, то можно отключить, в принципе и без нее плагин работает отлично, причем по умолчанию она отключена.

Далее идет настройка редиректа (перенаправления), здесь можно для каждой роли пользователя поставить свой редирект.

И последнее – это настройка оповещения – можно отредактировать сообщение, которое отправляется пользователю при регистрации.

Теперь нам нужно вставить виджет плагина Login With Ajax в сайдбар.

Заходим в панели управления сайтом на wordpress в пункт “Внешний вид” и выбираем подпункт “Виджеты”. Здесь находим виджет “Login With Ajax” и перетаскиваем его в сайдбар, после чего нам откроются его настройки:

Ставим галочки напротив двух пунктов представленных в данном виджете:

Вкл. Profile link – добавляет ссылку “Profile”, когда пользователь уже осуществил вход, перейдя по которой попадаете в редактирование своего профиля:

Вкл. AJAX Registration – добавляется ссылку “Регистрация” (смотри скриншот ниже), которая позволит вашим посетителям зарегистрироваться не покидая страницу сайта, на которой они находятся.

После добавления виджета от Login With Ajax в сайдбар у нас на сайте появится вот такая форма (под дизайн темы вашего сайта):

Как видите у нас также есть две ссылки внизу:

– Забыли свой пароль

Если нажать на ссылку “Забыли свой пароль”, то внизу у нас выскользнет форма восстановления пароля через почту:

Если же мы нажмем на ссылку “Регистрация”, то у нас появится лайтбокс (всплывающее окно) с формой регистрации:

Вводим имя пользователя и email, после чего жмем на кнопку “Регистрация” и получаем положительное сообщения:

Закрываем лайтбокс (всплывающее окошко), заходим в свой email и узнаем пароль от логина – вот и все процедура регистрации!

По моему мнению, удобно!

Если вы хотите вывести форму в любом другом месте вашего сайта, то используйте следующий код:

Аякс форма авторизации и регистрации на jQuery Ajax

Сегодня научимся делать формы авторизации, регистрации и восстановления пароля на стандартных шаблонах Битрикс с помощью jQuery Ajax, которые без перезагрузки страницы будут проверять валидность логина и пароля, выводить ошибки, авторизовывать, регистрировать и отправлять информацию о восстановлении пароля.
Если вы еще не изучили метод jQuery.ajax(), обязательно изучите, без него ни один проект не полноценен.

Модальные окна у меня работают на css-фреймворке Uikit, как и весь сайт, поэтому у Вас вызов модальных окон не будет работать, придется самим модальные окна сделать.

Также имейте ввиду, что регистрация в этом примере обычная, с полями по умолчанию, компонент настраиваемой регистрации необходимо настроить под себя самому.

Авторизация на ajax

#1 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    Друзья в чем моя ошибка, не как не могу сделать авторизации с помощью ajax

    #2 Sasha_1988

  • Клиенты WebForMySelf
  • 269 сообщений

  • Сообщение отредактировал Sasha_1988: 21 Август 2020 — 18:38

    #3 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    консоль ошибок не выдает, но браузер крашится

    #4 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    не много переписал скрип обрабочика формы ajax.php

    теперь отправляет на адресс /ajax.php?email=erehon%40ro.ru&password=q1w2e3r4t5&sub=Войти от рабатывает провека if и браузер предлагает сохранить пароль.

    Сообщение отредактировал erehon: 22 Август 2020 — 14:49

    #5 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    переписал файлы ajxa.js и файл ajax.php

    Страница перезагружается, авторизация не происходит

    #6 matroskin8

  • Администраторы
  • 12 409 сообщений

  • erehon (25 Август 2020 — 11:43) писал:

    Страница перезагружается, потому как Вы не отменили обычное поведение кнопки. Добавьте в конец обработчика нажатия кнопки return false; или же используйте метод preventDefault():

    Ну а авторизации с перезагрузкой страницы не происходит, потому как данные отправились методом GET (данные в ссылке в виде GET-параметров), а скрипт ожидает данные из массива POST.
    Это все, что можно сказать, не запуская Ваш код. Если выложите архив с Вашим приложением, которое можно установить и запустить на сервере, тогда можно будет попробовать сказать чуть больше.

    #7 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    #8 erehon

  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    matroskin8 (25 Август 2020 — 11:55) писал:

    все равно перезагрузка осталась

    Сообщение отредактировал erehon: 25 Август 2020 — 12:37

    #9 matroskin8

  • Администраторы
  • 12 409 сообщений
  • erehon (25 Август 2020 — 12:25) писал:

    Вы вообще не то сделали. В Ваш код отправки запроса нужно было вставить эту строку, а Вы ее вставили вообще отдельно. Но дело и не в этом даже. У Вас в коде ошибок масса. Вот лишь некоторые:

    1. Вы выбираете не пойми что:
    Выборка должна происходить по тегу, классу, id. а чем из этого является email или password? Да ничем. Добавьте к полям формы идентификаторы и выбирайте по ним.

    2. Отправку формы нужно вешать не на клик по кнопке, а на событие submit:

    3. В обработчике ajax.php нет соединения с БД. Необходимо подключить файл config.php с установкой соединения. Там же, в ajax.php, код заканчивается лишь отправкой запроса к серверу БД, но обработки самого запроса и, соответственно, возвращение какого-либо ответа и залогинивания юзера — этого всего нет.

    В общем, прикрепляю архив с исправленными выше ошибками. По хорошему, конечно, я бы на Вашем месте переписал код, особо обращая внимание на оформление кода, поскольку оно (оформление) у Вас ой как страдает.

    #10 erehon


  • Клиенты WebForMySelf
  • 127 сообщений
    • Город Санкт Петербург

    AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON

    27.02.2020

    AJAX запрос это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы.

    Илон Маск рекомендует:  Php и web кэширование

    Рассмотрим примеры AJAX запросов:

    XMLHttpRequest , — экземпляр данного класса включает в себя набор методов для работы в протоколах HTTP и HTTPS. AJAX запрос, — это комплекс выполняемых задач, в режиме «запрос-ответ».

    Каждый запрос к серверу, включает в себя ->

    • Указание метода HTTP (GET POST)
    • Запрашиваемого URL (пути до файла на сервере, который будет обрабатывать наш запрос)
    • Установка заголовков на пример: «application/x-www-form-url» или «application/x-www-form-urlencoded» или «application/json» или «text-plain»
    • Данные передаваемые на сервер (тело запроса)

    Каждый ответ от сервера включает в себя

    • Код статуса (успешно или нет отработала сторона сервера)
    • Заголовки HTTP/HTTPS
    • Данные передаваемые от сервера к клиенту (браузеру)

    Элементы кода, которые будут использованы в примерах.

    XMLHttpRequest , — это класс, для работы AJAX.

    request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.

    url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.

    .open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.

    .setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

    .send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.

    onreadystatechange – это событие которое случится когда нам придет ответ от сервера.

    readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения которые он может дать:

    Получено тело ответа

    Значение Описание
    Метод open() не вызван
    1 Метод open() вызван
    2 Получены заголовки ответа
    3
    4 Передача ответа выполнена

    status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.

    .responseText – данные, которые придут от сервера в виде строки.

    .response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.

    .text() – используется в запросе fetch, возвращает строку.

    .json() – используется в запросе fetch, возвращает json обращенный в объект.

    1. GET AJAX запрос на чистом JavaScript

    Делаем запрос на чистом JavaScript, например к файлу ajax_quest.php, который находится на сервере, и будет возвращать то что мы ему передали.

    2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере

    Принцип такой же как и у GET запроса, но не забываем что GET запросом данные отправляются открыто. У POST запроса данные скрыты, и в большинстве своем желательно использовать POST запросы.


    3. JSON AJAX POST запрос к серверу, на чистом Javascript

    Запрос на чистом Javascript. Получаем данные в JSON формате.

    4. JQuery GET & POST AJAX запрос к PHP на сервере

    Работаем с сервером через фреймворк JQuery.

    5. Fetch GET на чистом Javascript

    Fetch обертка над XHR

    6. Запрос на чистом Javascript «Vanila» Fetch + POST метод

    7. Fetch POST + JSON

    Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.

    8. Кросдоменный запрос JSONP Fetch + GET метод в github

    Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.

    Упрощаем регистрацию и вход на сайт

    Мы решили дополнить некоторыми примерами статью, опубликованную на хабре, чтобы вы узнали о некоторых «инновационных техниках» улучшения форм регистрации и авторизации.

    Упрощаем формы регистрации

    Итак, несколько приемов:

    • не нужно дублировать ввод пароля;

    Чтобы облегчить пользователю жизнь (зачем это делать хорошо показано в этом ролике от Google) лучше сделать одно поле и чекбокс, который будет снимать «маску» — всё это осуществляется с помощью небольшого javascript-кода.

    А. Подключаем библиотеки в ‹header›:

    1. Библиотека jQuery.

    2-7. инициализация на элементе.

    Б. HTML-код формы следующий:

    5-6. видимость этих полей переключается скриптом по чекбоксу.

    B. init.js

    Г. styles.css

    • лучше сделать автозаполнение полей на основе введённых данных;

    Чем меньше пользователю нужно вводить — тем лучше. Некоторые поля можно заполнить отталкиваясь от предыдущих, уже введённых, данных. Например, можно заполнять поле «город», считывая и обрабатывая значение из поля «индекс». Простой ajax-запрос и дело в шляпе. Использование AJAX для получения данных о городе и области из почтового индекса.

    А. Подключаем библиотеки в ‹header›:

    1.Поле, в которое следует внести почтовый индекс.

    В. zip_city.js:

    Г. zip_city.php: обработчик ajax-запроса.

    Д. db.php: конфигурация подключения к БД.

    Е. Создание таблицы БД:

    • можно сделать автоподстановку в поле ввода;

    Некоторые поля предполагают ограниченный набор вводимых значений. Например, пользователь может ввести два символа, увидеть список стран, которые начинаются на эти буквы и легко выбрать нужную. К тому же, он уж точно не совершит ошибок в названии родины. AJAX Auto-Complete под jQuery.

    А. Подключаем в ‹header›:

    1. Поле, в которое нужно начинать вводить название страны.

    В. init.js:


    Г. autocomplete.php: обработчик ajax-запроса

    Д. Создание таблицы БД:

    Ж. styles.css:

    • зачем вводить данные дважды?

    Во многих интернет-магазинах используют многошаговые формы заказа с полями адресов оплаты и доставки. Зачастую их значения совпадают. Почему бы не предложить пользователю в один клик продублировать значения уже введённых полей? Программно приём прост и вы можете применять его в разных случаях, где подразумевается вероятность повторения значений.

    А. Подключаем в ‹header›:

    2. jQuery Select Plugin.

    3. основной скрипт.

    Б. HTML-код форм следующий:

    14. Чекбокс копирования.

    В. init.js:

    • Кажется, люди устали читать капчу :)

    Вам ведь и самим, наверное, надоело читать неразборчивые символы с капчи и потом их вводить. Давайте помилуем пользователей, но при этом не пропустим ботов. Для этого можно прибегнуть к нескольким приёмам, рассмотрим один из них. Подход Honeypot Captcha — создаём поле на форме, невидимое пользователю, но видимое боту. Проверив это значение, мы сможем поймать нерадивых спамеров, при этом не создавая сложностей Настоящим Людям. Влияние капчи на уровень конверсии.

    А. HTML-код формы следующий:

    4. Кнопка открытия формы.

    19. Чекбокс, который заставляет устанавливать куки на очень долго.

    23. Место для сообщения.

    В. jqeasy.dropdown.js:

    Г. dropdown.php:

    Д. style.css:

    Модальное окно концентрирует всё внимание на себе и при этом позволяет поместить на форму дополнительную информацию или описание.

    А. Подключаем библиотеки в ‹header›:

    1. Библиотека jQuery.

    4. Основной скрипт.

    6. Основные стили.

    7. Базовые стили для модального окна.

    Илон Маск рекомендует:  Dos fn 25h установить вектор прерывания

    Б. HTML-код формы следующий:

    Войти

    2. Кнопка открытия формы.

    6-27. Модальное окно.

    8-11. Заголовок модального окна.

    В. init.js:

    Г. do-login.php: обработчик ajax-запроса

    Г. private.php: страница, к которой доступ только после авторизации.

    Д. config.php:

    E. autologin.php:

    З. logout.php:


    К. stylesheet.css:

    Л. basic.css:

    • Ставим курсор в первое поле формы.

    Чтобы не заставлять пользователя бегать глазами и мышкой по странице в поисках поля, куда нужно вводить текст, мы можем автоматически устанавливать там курсор. А главное, что это делается очень просто, а им — приятно.

    А. HTML-код формы следующий:

    4. в это поле будет установлен фокус Б. добавить следующий js:

    Заключение

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

    Примеры отправки AJAX JQuery

    AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

    Полное описание функции AJAX на jquery.com.

    GET запрос

    Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
    По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

    В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

    Код можно сократить используя функцию $.get

    Код файла index.php

    GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

    POST запросы

    Или сокращенная версия – функция $.post

    Код файла index.php

    POST запросы ни когда не кэшироваться.

    Отправка формы через AJAX

    При отправке формы применяется функция serialize() , подробнее на jquery.com.

    Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

    Пошаговая регистрация средствами jQuery

    В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery .

    Если регистрация на вашем сайте предусматривает заполнение нескольких десятков полей, очень не рационально размещать их на одной странице. Ведь пользователь существо очень ленивое и не захочет заполнять, увидев все эти поля.

    Альтернативный вариант — разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов — ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.

    Так же логично разбивать регистрацию на логические блоки — контактная информация, адрес, личные данные и так далее.

    Для пошаговой регистрации совсем не зачем создавать несколько форм и отдельно посылать данные на сервер. Гораздо удобнее все поместить в одну форму, но каждый шаг показывать пользователю лишь определенную часть формы. Именно такой и будет логика в нашем примере.

    По мимо логики стоит учитывать, что вначале видна только ссылка «Вперед»/«Следующий шаг», а на последнем шаге её не видно, но видно «Назад» и «Регистрация».

    Рассмотрим сам пример:

    Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js , не забываем так же подключить библиотеку jQuery :

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

    Проверить работоспособность примера вы можете на демо-странице:

    Разобравшись в примере вы вполне сможете сделать свою регистрацию в несколько шагов на сайте, так же дополнив код своими разработками, например, можно сделать более красивый переход между шагами и т.д.

    Форма авторизации на AJAX

    Долганин Антон

    Дата последнего входа: вчера в 11:14

    В данном посте опишу не столько решение (хотя, оно довольно востребованное), сколько подход к использованию того что есть и без лишних лисапедов.

    Итак, задача — сделать красивую форму авторизации на AJAX, которая бы без перезагрузки страницы проверяла валидность логина/пароля, выводила ошибки, и авторизовывала.

    Сначала я думал оформить это как решение, но в итоге бы получился очередной лисапед — я не встречал еще ни одного проекта, где такого рода компоненты вставали без кастомизации. Поэтому, посидел, подумал, и представляю, на мой взгляд, красивый подход к решению задачи.

    За основу берем стандартный шаблон компонента system.auth.form, который я переделал на выпадашку (было даже в каком-то стареньком шаблоне Битрикса это дело).

    Правим под свой стиль, кастомизируем как угодно. Чтобы работало. Теперь пришло время вешать аякс. Разумеется, сначала подключаем jquery (я до сих пор не люблю jquery из коробки, так как наши спохватились поздно, и каждый проект уже оброс своими библиотеками jquery, а винегрет из них я не хочу).

    Я не вносил никаких изменений в стандартную форму, кроме как окружил ее дивом login-area. Ели она у вас уже кастомизирована, то проверьте наличие атрибута action. Да и по сути все.

    Иду по порядку так, как рождалась идея. Итак, сначала я накидал js-код

    Что делает код (небольшой урок по jquery заодно, так сказать):
    1. Слушаем сабмит формы, и если он происходит, вклиниваемся в него.
    2. Создаем переменные для удобства. Об ajax_key я расскажу ниже.
    3. Бежим по всем input, и кидаем их в массив для отправки.
    4. Собственно, отправляем данные, ответ принимаем как json. Получаем ответ и обрабатываем его. Если ошибки — выводим их, если все ок — рефрешимся сами на себя (мне этого хватило, но вы можете, например, вывести сообщение об успешно авторизации и скрыть форму)

    Код написан, но вот как поулчать ответ без лисапедов, лишних скриптов и прочего? Решение пришлось легко и красиво.

    Мы шифруем лицензионный ключ и передаем его в форме. И в этом же шаблоне формы авторизации, проверяем этот ключ, и если он есть и верен, то отдаем данные в формате json. Проверка на ключ нужна по одной причине — чтобы «злоумышленник» не получил лишний раз пустую страницу, передав какой-нибудь ?ajax=Y

    Здесь тоже небольшой ликбез:

    1. RestartBuffer — так как страница уже начала выполняться (форма же у вас в шаблоне), то надо сбросить буфер.
    2. PUBLIC_AJAX_MODE на всякий случай уберем лишний мусор (такой как «отладка страницы» и прочее).
    3. Если форма сработала с ошибкой, то отдаем ошибку как json-объект, иначе говорим, что все ок.
    4. Выходим.

    Есть одна недоработка, которую я не сделал, так как мне не требовалось — не учитывается защищенная авторизация и пароль передается в открытом виде. Я даже не смотрел как это реализуется, поэтому, если кто-то дополнит код на этот случай, включу в пост.

    Естественно, по аналогии вы можете реализовать любую форму — регистрации, восстановления пароля, и прочие.

    PS: Убирайте лишние пробелы в коде, вставленные парсером.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL