Вопрос или проблема
Я разрабатываю плагин для WordPress и ищу способ сохранить данные, введенные в блок, в таблице mySQL. Это всё. Но как можно отправить данные из редактора блоков на серверную сторону? Я spent две недели, ища подходящую технику, но без успеха.
Сценарий прост:
registerBlockType("bla/quote-block", { //...
attributes: { quoteAtt: { type: 'string' } },
edit: function(props) {
props.setAttributes( { quoteAtt: getQuote() } );
// ?? Отправить props.quoteAtt на сервер ??
}
Я нашел, как использовать AJAX + jQuery + wp_localize_script
, но этот метод, по всей видимости, подходит только для отправки данных с фронтенда (например, данных формы). REST API ужасно сложен, и вся документация касается чтения данных постов [мета], а не сохранения данных в таблицу.
Спасибо!
Я нашел решение, используя Ajax с нативным Javascript следующим образом:
// Имя файла send2server.js
const sendToServer = function() {
/* Подготовьте объект для отправки: ********************************************************************/
var params = new FormData();
params.append('action', 'update_sql'); // update_sql реализован на PHP (см. ниже)
params.append('quoteAtt', props.attributes.quoteAtt); // Фактические данные
/* Создайте объект соединения Ajax: ****************************************************************/
var request = new XMLHttpRequest();
request.open('POST', ajax_object.ajax_url, true); // ajax_object.ajax_url определен в PHP (ниже)
request.send(params); // Отправить запрос на сервер
}
На серверной стороне следующие функции принимают запрос следующим образом:
// Файл plugin.php
function load_ajax_script() {
wp_enqueue_script(
'send2server',
plugins_url( 'send2server.js', __FILE__ ),
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'send2server.js' )
);
wp_localize_script( // сделать ajaxurl доступным для Javascript
'send2server',
'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )
);
}
add_action('init', 'load_ajax_script');
function update_sql() { // Вызывается через request.send()
$received = $_POST["quoteAtt"]; // Содержимое quoteAtt
// ...
}
add_action('wp_ajax_update_sql', 'update_sql'); // 'update_sql' соответствует 'action' в params
Это лучшее решение? Я не знаю, но оно работает.
Ответ или решение
Разработка плагина для WordPress может быть сложной задачей, особенно когда необходимо передавать данные из редактора блоков в базу данных. В вашем случае вы уже нашли решение, основывающееся на AJAX, и это действительно один из наиболее эффективных способов. Давайте подробнее разберем ваше решение, его достоинства и альтернативные подходы.
Шаг 1: Использование AJAX для передачи данных
Ваш код представляет собой правильный подход к передаче данных с клиента на сервер с использованием AJAX через объект XMLHttpRequest
. Давайте подробнее разберем ключевые моменты вашего решения.
Подготовка данных на клиенте
Вы используете FormData
, что позволяет легко организовать данные для отправки на сервер:
var params = new FormData();
params.append('action', 'update_sql'); // Задаем действие для обработки на сервере
params.append('quoteAtt', props.attributes.quoteAtt); // Добавляем данные, которые нужно отправить
Это позволяет вам динамически передавать параметры, что удобно, если вам нужно отправить несколько значений.
Создание AJAX-соединения
Отправка данных выполняется через объект XMLHttpRequest
:
var request = new XMLHttpRequest();
request.open('POST', ajax_object.ajax_url, true); // Открываем соединение
request.send(params); // Отправляем параметры на сервер
Ваш подход имеет следующие преимущества:
- Простота использования.
- Отправка данных асинхронно, не блокируя интерфейс пользователя.
- Легкость интеграции с текущей логикой вашего блока.
Шаг 2: Обработка запроса на сервере
На стороне сервера, ваша функция update_sql()
обрабатывает входящие данные и извлекает информацию, полученную из AJAX-запроса:
function update_sql() {
$received = $_POST["quoteAtt"]; // Получаем данные из запроса
// Здесь можно выполнить запрос к базе данных для сохранения $received
}
add_action('wp_ajax_update_sql', 'update_sql'); // Регистрация обработчика для AJAX
Не забудьте добавить проверки безопасности при работе с входящими данными. Например, можно использовать check_ajax_referer()
для проверки подлинности запроса.
Альтернативные подходы
Хотя ваше решение работает, важно рассмотреть другие подходы, которые могут быть более удобными:
-
REST API WordPress: Несмотря на то, что документация может показаться сложной, REST API WordPress предлагает мощный и стандартизированный способ взаимодействия с данными. С помощью API можно создавать, читать, обновлять и удалять записи в базе данных. Это может упростить интеграцию с другими сервисами в будущем.
-
Использование
wp_localize_script
более активно: Вы можете использовать этот метод для создания нескольких параметров и функций для взаимодействия с вашим плагином, включая строки для обработки ошибок и подтверждения успешной отправки. -
Групповая обработка данных: Если у вас есть несколько блоков, вы можете отправлять их данные вместе, что уменьшит количество запросов к серверу и повысит производительность.
Заключение
Ваше решение с использованием AJAX и JavaScript является вполне приемлемым для отправки данных из редактора блоков на сервер в WordPress. Обязательно удостоверяйтесь, что данные обрабатываются безопасно на серверной стороне, и не забывайте о возможности расширения функционала через REST API в будущем.
Если у вас есть дополнительные вопросы или вы хотите рассмотреть другие аспекты разработки вашего плагина, не стесняйтесь спрашивать.