[Iws] Диалоговые окна - lesson 04


Диалоговые окна. Управление mdw. Функция управление данными mdw. AJAX.

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». Скачать проект текущего урока