Инструменты пользователя
решения:взаимодействие_по_ajax
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
решения:взаимодействие_по_ajax [2018/11/21 03:46] a1 |
решения:взаимодействие_по_ajax [2023/06/03 04:39] (текущий) gear |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| ====== Взаимодействие по AJAX ====== | ====== Взаимодействие по AJAX ====== | ||
| Взаимодействие по AJAX с клиентской стороны реализуется функцией ''w_core.request'' | Взаимодействие по AJAX с клиентской стороны реализуется функцией ''w_core.request'' | ||
| - | По идеологии Wmart, событие должно быть привязано к тегу с атрибутом ''data-action'' | ||
| - | Все объекты, над которыми выполняется действие программно, должны иметь атрибут ''data-type'' | ||
| ===== Передача запроса при отправке формы ===== | ===== Передача запроса при отправке формы ===== | ||
| + | ''/views/somebody/somebody.form.php'' | ||
| + | <code html> | ||
| + | <form data-action="sombody.action"> | ||
| + | <input type="text" name="field1" data-field="somebody.field1" /> | ||
| + | <input type="text" name="field2" data-field="somebody.field2" /> | ||
| + | <input type="submit" /> | ||
| + | </form> | ||
| + | </code> | ||
| + | ''/assets/js/somebody.js'' | ||
| <code javascript> | <code javascript> | ||
| - | $('[data-action="sombody.action"]').on('submit', function(e){ | + | document.querySelector('[data-action="sombody.action"]').addEventListener('submit', (e)=>{ |
| e.preventDefault(); //исключаем действие по умолчанию | e.preventDefault(); //исключаем действие по умолчанию | ||
| - | var form = $(this); //получаем форму | + | let elForm = e.target; //получаем элемент формы |
| - | var request = $(this).formObject(); //получаем данные из формы | + | let requestData = new FormData(elForm); //получаем данные из формы |
| - | wmart.request('somebody.action',request,function(response){ | + | w_core.request('somebody.action',requestData,function(responseData){ |
| - | form.formErrors(response.errors); //обрабатываем результат проверки | + | w_core.formErrors(elForm, responseData.errors); //обрабатываем результат проверки |
| + | console.log(responseData.info); //выводим в консоль переданную переменную info | ||
| }); | }); | ||
| }); | }); | ||
| </code> | </code> | ||
| + | |||
| + | ''/controllers/somebody.php'' | ||
| + | <code php> | ||
| + | function somebodyAction() { | ||
| + | $response = w_response::load($this); //получение объекта результата запроса | ||
| + | $field1 = w_input::int('field1'); //получаем поле field1 как число | ||
| + | $field2 = w_input::text('field2'); //получаем поле field2 как текст | ||
| + | |||
| + | $response->errorField($field1, 'somebody.field1', 'Поле field1 заполнено неверно'); | ||
| + | $response->errorField($field2, 'somebody.field2', 'Поле field2 заполнено неверно'); //проверка полей | ||
| + | |||
| + | if (!$response->fail) { //проверяем, если валидация прошла успешно | ||
| + | $response->info = 'Все ок!'; //передаем переменную info | ||
| + | } | ||
| + | | ||
| + | $response->exec(); //Отправляем данные | ||
| + | } | ||
| + | </code> | ||
| + | |||
| ===== Передача запроса при клике по ссылке или кнопке ===== | ===== Передача запроса при клике по ссылке или кнопке ===== | ||
| <code javascript> | <code javascript> | ||
| - | $('[data-action="sombody.action"]').on('click', function(e){ | + | document.querySelector('[data-action="sombody.action"]').addEventListener('click', (e)=>{ |
| e.preventDefault(); //исключаем действие по умолчанию | e.preventDefault(); //исключаем действие по умолчанию | ||
| - | var obj = $(this); //ссылка | + | let elBtn = e.target; //получаем элемент ссылки |
| - | var request = $(this).attrObject(); //получаем data-атрибуты ссылки | + | let requestData = Object.assign({},elBtn.dataset); //получаем data-атрибуты ссылки |
| - | wmart.request('somebody.action',request,function(response){ | + | w_core.request('somebody.action',requestData,function(responseData){ |
| - | console.log(response.result); //выводим поле result из ответа | + | console.log(requestData.info); //выводим в консоль переданную переменную info |
| }); | }); | ||
| }); | }); | ||
| </code> | </code> | ||
| - | |||
| - | ===== Отправка файла ===== | ||
| - | |||
| - | |||
решения/взаимодействие_по_ajax.1542761176.txt.gz · Последние изменения: 2018/11/21 03:46 — a1
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
