WordPress: передача данных на страницу с помощью Ajax

@Daniel

Вы задали очень хороший вопрос, прежде чем приступать к решению, нам нужно понять правила большого пальца wordpress ajax.

Правила большого пальца:

1. В соответствии со стандартами WordPress все запросы ajax должны появиться на «ajaxurl» в javascript. Он фактически содержит путь к файлу « wp-admin / admin-ajax.php ».

   Пример:

    $.ajax({ url: ajaxurl, data: {'action':'generateCptApiKey'}, success:function(data) { console.log(data); }, error: function(errorThrown){ console.log(errorThrown); } }); 

Если вы делаете какой-либо sutff в разделе панели управления wp-admin или связаны с секцией wp-admin, как создание страницы параметров в области панели управления wp-admin , то глобальная переменная ajaxurl всегда будет доступна там в javascript.

Если случай этого ajax-запроса инициализируется с начальной страницы / сообщения, то вам нужно указать путь admin-ajax.php, используя следующий метод и лучше, если вы локализируете это для интерфейсного javascript, поэтому он будет доступен в переменной javascript, например он доступен в разделе панели управления wp-admin.

Для этого нам нужно добавить еще несколько строк кода.

Метод:

Обновленный внешний код кода переднего конца ajax:

 // Register the script wp_register_script( 'ajaxsettings', 'path/to/ajaxsettings.js' ); // Localize the script with new data $ajaxsettings = array( 'ajaxurl' => admin_url('admin-ajax.php') ); wp_localize_script( 'ajaxsettings', 'ajaxsettings', $ajaxsettings ); // Enqueued script with localized data. wp_enqueue_script( 'ajaxsettings' ); $.ajax({ url: ajaxsettings.ajaxurl, data: {'action':'generateCptApiKey'}, success:function(data) { console.log(data); }, error: function(errorThrown){ console.log(errorThrown); } }); 

После этого нам нужно написать метод для обработки этого запроса ajax и отправить результат обратно на вызов ajax.

Для обнаружения запроса ajax-запроса в wordpress у них есть два стандартных крючка, крючки – это просто события, например, когда я отправляю запрос ajax, связанный с ajax связанный с wordpress hook вызывает, и я могу вызвать любую функцию на этом триггере.

Таким образом, в основном для обработки запроса ajax ниже приведены два крючка:

1. wp_ajax_ (действие) : обрабатывает запрос от аутентифицированных / зарегистрированных пользователей. (Используется для задач, связанных с домашней страницей wp-admin).
2. wp_ajax_nopriv_ (действие) : он обрабатывает внешние аутентифицированные запросы. (Используется для задач, связанных с главной страницей / отправкой ajax-вызовов)

Здесь (действие) – это имя метода, который вы должны кодировать в текущем файле theme.php темы , и этот метод будет обрабатывать этот запрос ajax.

Примеры:

Объектно-ориентированный стиль:

 add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles')); add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles')); 

Примечание. Здесь «cleanResponseFiles» – это метод класса, который будет обрабатывать запрос ajax. и $ this указывает объект текущего класса.

Процедурный стиль:

 add_action( 'wp_ajax_cleanResponseFiles', 'cleanResponseFiles'); add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles'); 

Примечание. Здесь «cleanResponseFiles» добавляется функция в текущий файл theme.php темы, и он будет обрабатывать запрос ajax.

В этом мы рассматриваем, что запрос ajax может быть сделан либо из панели управления wp-admin, либо из front-end page / post.

Пример метода обработчика запроса ajax:

 function cleanResponseFiles(){ echo "<pre>"; print_r($_POST); echo "</pre>"; //Always use exit() in ajax request handler function end exit(); } 

Правило большого пальца:

1. Всегда используйте метод exit () в методе обработчика запроса ajax, это важно.
2. Лучшей практикой отправки запроса ajax является использование WordPress_nonce .

Это просто для avoding CRSF (подделка запроса на кросс-сайт), добавив Honeypot , скрытое поле ввода с генерируемым случайным ключом и по методу обработчика запроса оно должно быть проверено.

Это методы, которые мы можем использовать для создания Wordepress nonce и проверки обработчика запросов WordPress nonce и ajax или простого обработчика запросов HTTP.

Методы WordPress Nonce:

1. wp_create_nonce : Используется для создания случайного ключа для отправки в виде скрытого поля.
2. wp_verify_nonce : используется для проверки случайного ключа в методе обработчика запросов.

В этом комментарии я приложу рабочий пример wordpress ajax call ASAP.

Просто краткий: все сообщения ajax должны быть отправлены admin-ajax.php. Каждый запрос должен содержать по крайней мере одну часть данных, называемую действием. Основываясь на этом действии, код в admin-ajax.php создает два крючка. если значение action – cusom_action, автоматически создаются wp_ajax_custom_action и wp_ajax_nopriv_custom_ction. Проверьте WordDress coddex. https://codex.wordpress.org/AJAX_in_Plugins

Обратитесь к этому https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

В основном вы создаете такое действие, как wp_ajax_myaction , которое вы можете определить в своих functions.php или где-то, где вам кажется. А затем вызовите его, как показано в примере (раздел «Использование») на странице.

EDIT: добавление кода, который поможет вам понять

В ваших functions.php

 add_action( 'wp_ajax_my_ajax', 'my_ajax' ); add_action('wp_ajax_nopriv_my_ajax', 'my_ajax'); function my_ajax() { die( "Hello World" ); } 

В вашем JS:

 $.ajax({ url: "http://yoursite.com/wp-admin/admin-ajax.php", data : {action : 'my_ajax'}, success: function( data ) { alert( 'The code says ' + data); } }) 

Немного о коде:

1. Это просто быстрый и грязный код, в основном сорванный с примера, чтобы показать вам, как он будет работать.

2. Действие no_priv используется для разрешения несанкционированного доступа (например, для пользователей, не являющихся администраторами)

3. Обычно url не жестко закодирован по способу, показанному в примере, люди обычно передают его сценарию с помощью admin_url( 'admin-ajax.php' )

4. action , отправленное в данных, определяет, какую функцию следует вызывать. ( my_ajax в нашем случае)

Дайте знать, есть ли у вас проблемы.