1. Управление mdw.
См. Диалоговые окна - lesson 02 и Диалоговые окна - lesson 03
1.1 Цели и задачи.
У нас есть работающая форма и нужно организовать передачу информации из этой формы:
на сервер (для сохранения);
в программу для организации дальнейшей работы;
на экран (отобразить результат диалога);
Поставим себе цель передать содержимое полей формы и дополнительной информации:
на сервер – сохранить в базу;
в переменные PHP – для дальнейшего использования (например, хранить имя зарегистрированного пользователя);
в переменные JS – для дальнейшего использования;
передать на сервер дополнительную информацию (например, из объекта param_user_extra);
послать на почту админа сообщение (например, о регистрации нового пользователя);
сформировать сообщение на экране после закрытия формы;
Для обработки данных мы применим технологию AJAX.
AJAX - подход к построению интерактивных веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс» (по аналогии с мифологическим именем), но у аббревиатуры AJAX нет устоявшегося аналога на кириллице.
1.2 Пути решения.
Сначала немного переделаем вызов mdw: вместо функции dispalay_mw (отображение mdw) создадим функцию _management_mdw (управление mdw) соответственно изменится вызов mdw.
Уберем ненужные нам пока поля формы (в файле _user_reg_param.js) – оставим «Name», «Email», «Password», «Text area», «image» и «Captcha».
В функцию управление mdw введем следующие свойства:
отображение mdw;
перехват нажатия кнопки "CANSEL" в форме (скрыть форму);
ожидание завершения операции передачи информации на сервер (preloader):
во время ожидания выведем на экран gif – анимацию и маску (затемнение) экрана;
организуем отправку данных формы после нажатия кнопки "OK";
1.3 Алгоритм отправки данных формы «через» AJAX.
Если нажата кнопка «Cancel» - скроем форму, без сохранения введенных данных;
Если нажата кнопка «Ok» начинает работу функция управление данными mdw:
Создается переменная form_data содержащая информацию полей формы;
к переменной form_data добавляются:
дополнительные параметры - param_user_extra
параметры сохранения image - param_save_img;
устанавливаются параметры AJAX;
AJAX отправляет данные на сервер в файл указанный в параметре param_input_form[«file_output_data»];
в файле _user_ajax_data.php производим следующие операции:
сохраняем в БД,
сохраняем данные в переменных php,
отправляем mail админу,
формируем сообщение на экран,
возвращаем необходимую информацию назад в JS (в функцию управление данными mdw).
«функция управление данными mdw» после получения данных:
выводит сообщение на экран;
производит действия с полученными данными;
2. Параметры для отправки формы.
Изменим параметры в файле «user_reg_param.js»:
параметры формы. Эти параметры мы уже настраивали, остановлюсь только на параметре: file_output_data: «/_user_reg/_user_ajax_data.php», // имя файла для отправки данных формы "через" AJAX;
параметры сохранения img в папку и имени img в базу «param_save_img»:
параметры сохранения img в папку
img_save_folder_flag: true, // true/false - сохранять img в папке
img_save_folder_path: «/temp», // папка для сохранения img на диск (если папка не существует, то будет создана)
img_save_folder_width: 600, // ширина img при сохранении на диск ( heigth = auto )
img_save_folder_compres: 85, // степень сжатия jpeg-img при сохранении на диск
параметры сохранение img в базу
img_save_base_flag: true, // true/false - сохраненять имя img в базе
img_save_base_table_name: «my_table_01», // имя таблицы для записи имени img
img_save_base_page_field: «page», // имя поля страницы сохранения img
img_save_base_page_value: «page_1», // страница сохранения img
img_save_base_name_field: «img» // имя поля с именами файлов img
3. Обработка данных в PHP.
Для дальнейшей работы нам нужен файл _user_ajax_data.php в него будут отправляться данные из AJAX, этот файл мы уже создали при создании проекта. Путь к нему должен быть прописан в параметре file_output_data.
В этом файле напишем программы, выполнявшие часть наших целей (на языке PHP) см. пункт 1.3; Для выполнения остальной части целей вернем информацию из файла _user_ajax_data.php в вызывающую программу на JS, обратно в функцию управление данными mdw «_management_mdw» и там продолжим обработку.
Что мы хотим в дальнейшем сделать в файле _user_ajax_data.php после получения данных формы и дополнительной информации описано в пункте 1.1, а пока мы ограничимся:
получим данные формы;
получим дополнительные параметры;
создадим сообщение после закрытия mdw;
отправим назад в функцию «управление данными mdw» полученную информацию;
отобразим полученную информацию;
4. Обработка данных возвращенных в JS.
Какие действия мы производим в функции «_management_mdw» после нажатия кнопки «Ок»:
определим переменную «form» указывающую на нашу форму.
определим переменную «formData» указывающую на все поля нашей формы.
добавим к данным формы параметры сохранения img;
добавим к данным формы дополнительные параметры;
вставим блок AJAX в нем:
«url» - строка, содержащая URL адрес, на который отправляется запрос;
«type» POST / GET -псевдоним (алиас) для параметра method;
«data» - данные, которые будут отправлены на сервер (в файл php);
«processData» - установите значение этого параметра в false;
«contentType» - определяет тип содержимого, - установите значение этого параметра в false;
«beforeSend» - функция обратного вызова, которая будет вызвана перед выполнением AJAX запроса:
отображаем на экран гифку «ожидайте» preloader и preloader_mask (операция запущена);
«complete» - функция обратного вызова, которая вызывается, когда запрос завершен;
скрываем гифку «ожидайте» preloader и preloader_mask (операция завершена);
«success» - функция обратного вызова, которая вызывается если AJAX запрос выполнен успешно:
две строки закомментированные – служат для отладки;
переменная «data_mess_after_close» для получения данных из php;
проверяем активацию пользователя (для использования в дальнейшем);
выводим сообщение о результатах обработки формы;
очищаем все созданные при валидации формы сообщения и флаги ошибок;
скрываем форму;
Вспомогательные функции:
функция для вывода сообщения после закрытия mdw (сюда же относится функция «создать mdw для сообщения после закрытия mdw»);
функция очистить все созданные при валидации формы сообщения и флаги ошибок;
5. Отладка функции управление данными mdw.
Для отладки:
закомментируем строки от строк, которые служат для отладки и до конца функции ajax;
раскомментируем строки, которые служат для отладки;
скопируем строки, скрывающие mdw за функцию ajax (см. Картинку);
запускаем программу;
вводим в форму корректные данные (и image) пока кнопка «регистрация» не станет активной;
в консоли только одна не критическая ошибка «не найдена иконка проекта»;
жмем на кнопку «Регистрация» (обращаю внимание никакой регистрации пока нет –мы отлаживаем работу формы);
отобразились три массива из файла php:
var_dump( $res_form_data );
var_dump( $param_user_extra );
var_dump( $_data_mess_after_close );
Обращаю внимание в данном случае эти массивы были выведены на экран не командой var_dump из php а командами jQuery:
$(«body»).prepend(««);
$(«#debug»).append(_data_mess_after_close);
Из переменной «_data_mess_after_close» полученной в параметре ajax:
success: function (_data_mess_after_close);
Для проверки попробуйте закомментировать строки отладки в функции «управление данными mdw».
Скачать проект текущего урока
