WordPress и FormData

Задача будет следующая. Создаем div элемент, с возможностью его редактирования, аналог <textarea>, только имеет ряд преимуществ перед <textarea>.
Далее, передадим на сервер данные из этого дива методом POST, используя AJAX. Попутно, «на лету», добавим еще одно поле с данными.

В целом, это будет аналог того, если бы вы создали форму с полями, и методом post отправили эту форму на сервер, с дальнейшей ее обработкой. Но, в моем случае, мы не будем использовать тег <form>, мы будем использовать дивы, инструмент для  передачи данных будет отличаться, а принцип обработки данных не измениться. И это все будет приводится на примере WordPress, но отличие от того, если бы это был бы не WordPress, а любой другой сайт, написанный на php, заключается только в одной строке, о ней я напишу позже.

Пример, если бы мы использовали форму написанную на HTML:

После нажатия кнопки, произойдет отправка данных на сервер, с перезагрузкой страницы.
Теперь изменим нашу форму, но уже будем использовать JQuery. Уберем теги <form> и <textarea>, <textarea> заменим на div с функцией редактирования. Для этого можно в WordPress создать страницу, и в редакторе перейдите с визуального отображения, на текст, и вставить следующий код:

 

Здесь пишем текст, для отправки на сайт

Можете вписать любой текст и нажать – Отправить.

Используя подобный подход, вы сможете создавать любые формы (Обратная связь, прием заказов и т.д)

Теперь напишем функцию, которая примет наш текст, и вернет его назад в виде алерта (окна оповещения).

Для этого мы создадим js файл, где пропишем наш скрипт, к примеру: send.js. Потом мы этот файл поместим в каталог с нашей темой вордпресса и подключим его с помощью functions.php, который тоже находится в каталоге нашей темы.

send.js

Примечание: если в качестве поля ввода данных у нас будет input, то, чтобы считать значение с помощью JQuery, мы будем уже использовать  метод .val(), а не .text() ->  $(‘.mytext’).val()

Теперь откроем файл functions.php из вашей темы, и подключим созданный скрипт, плюс, напишем функцию, которая будет обрабатывать переданные данные:

functions.php

‘mysend’ – Это уникальное название нашего скрипта. Последний параметр true, означает, что мы хотим подключить наш скрипт в футоре.

Напишем функцию обработки формы:

functions.php

Это один из вариантов передачи и обработки данных.

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

formData.append(‘action’, ‘ajax_saveform’);

 

(2 оценок)
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x