Я бэк-эндщик, и в JavaScript мои познания весьма не глубокие — знаю синтаксис, как подключить скрипты, несколько раз использовал jQuery и скрипты типа LightBox, с фреймворками не работал.
Раньше на проектах для себя обходился бэк-эндом: авторизация, регистрация - были на отдельной странице (или в шапке, но с отправкой формы PHP скрипту и последующей перезагрузкой страницы). Сейчас же появилась необходимость в минимальные сроки сделать авторизацию следующим образом:
1. При нажатии на кнопку "Вход" всплывает стилизованное окошко с формой входа. При этом основной контент (на фоне) затемняется (или обесцвечивается).
2. После ввода данных и отправки формы страница не обновляется, в нём просто появляется индикатор обработки.
3. При успешном входе появляется зелёная галочка и вся страница обновляется. При ошибке входа в этом же окошке выдаётся сообщение об ошибке и снова форма входа.
4. Также в этом окошке можно нажать "забыл пароль", ввести почту для отправки ссылки для сброса - всё это без обновления основного контента сайта, только внутри этого окошка!
Чем это проще всего сделать и где посмотреть примеры? Сформировать весь контент внутри окошка я , естественно, могу на бэк-энде (Laravel 5.4), главный вопрос - как наладить взаимодействие JS и PHP и обновление контента только внутри окошка. Пока я знаю только волшебное слово AJAX, а пройти полный курс по нему у меня просто нет сейчас возможности.
// Это все что нужно знать об AJAX в общем случае...
const xhr = new XMLHttpRequest(); // 1. Создаем объект запроса
xhr.open("POST", "https://site.com/something"); // 2. Настраиваем запрос
xhr.onload = () => { // 4. Ждем пока придут данные с сервера
// 5. Делаем что то
};
xhr.send(data); // 3. Отправляем данные на сервер
