AJAX вызов во фронтенде WordPress

Question

AJAX вызов во фронтенде WordPress

19 авг. 2014 г., 10:48:08

Просмотры: 22.9K

Голосов: 1

В моем плагине я использую два AJAX-вызова в панели администратора, которые работают хорошо. Но для обеспечения той же функциональности во фронтенде я создал копии этих двух функций с другими именами. Вот мой код:

В основном файле плагина:

function my_action_callback(){
  global $wpdb; 
if (@$_POST['id']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //выбрать eemail_id,eemail_content,eemail_subject из WP_eemail_TABLE где 1=1 и eemail_status='YES' и eemail_id=".$_POST['id']

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

И в моем settings.js:

function showEntryfront(id)
   {
jQuery(document).ready(function($) {

    var data = {
        action: 'my_action',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Получено с сервера: ' + response);
        var n=response.split("_");  
        jQuery('textarea#mail_contents').text(n[0]);
        $('#mail_subject').val(n[1]);
        // jQuery('textbox#mail_subject').text(n[1]);
          });
       });
   }

А страница плагина, которая вызывает showEntryfront():

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Выберите тему письма</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>

Вторая функция делает то же самое, только таблица базы данных другая.

В консоли Firebug по-прежнему показывается:

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

И textarea не заполняется данными из таблицы WP_eemail_Table. Обратите внимание, что эта функциональность работала в панели администратора WordPress. Я знаю, что AJAX-вызов в админке автоматически загружается через admin-ajax.php, но как реализовать то же самое во фронтенде? Есть ли ошибки в моем коде?

Zammuuz

788

jquery ajax фронтенд

Комментарии

ajaxurl недоступен на фронтенде. Вам нужно явно определить его самостоятельно для фронтенда. Проверьте это, вы можете получить ссылку для реализации ajax во фронтенде. ссылка

Nilambar Sharma

19 авг. 2014 г. 11:52:49

@Nilambar: Привет, друг... спасибо за ответ.. я уже пробовал метод "wp_ajax_nopriv_", как указано в ссылке, которую ты поделился. Не мог бы ты помочь мне найти ошибку в том, как я определил ajaxurl явно?

Zammuuz

19 авг. 2014 г. 12:13:15

Вам нужно локализовать скрипт с помощью функции wp_localize_script пример

Nilambar Sharma

19 авг. 2014 г. 12:16:11

Короткое замечание: ... eemail_id=" . $_POST['id']) уязвимо для SQL-инъекции.

David Hayes

6 июл. 2018 г. 16:04:52

Все ответы на вопрос

В WordPress действительно есть встроенное решение для использования Ajax на фронтенде! В WordPress есть малоизвестная, но очень полезная JavaScript-библиотека, доступная через объект window.wp, например:

// В JS:

var action = 'my_action';
var data = {id: 123};

var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
  console.log('Ajax завершен:', response);
});

// объект promise также имеет другие методы:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

Преимущество в том, что этот объект поддерживается и используется ядром WordPress. Поэтому можно быть уверенным, что это актуальный, рабочий и наиболее надежный способ обработки Ajax. Также обратите внимание, что не нужно работать с jQuery...

Если у вас нет объекта window.wp во фронтенде, убедитесь, что вы добавили wp-util в зависимости ваших JS-скриптов, например:

wp_register_script( 'your-handle', 'https://your-domain.com/path/to/file.js', [ 'wp-util' ] );

Philipp

1.24K

6 нояб. 2016 г. 19:56:17

Комментарии

Есть ли какая-то документация по wp.ajax? Спасибо

ejntaylor

6 апр. 2018 г. 13:50:36

Nilambar Sharma 1.64K · Accepted Answer · 2014-08-19T12:20:32Z

Для локализации скрипта необходимо использовать функцию wp_localize_script. В административной части сайта переменная ajaxurl уже доступна. Однако на стороне фронтенда вам нужно локализовать скрипт, чтобы определить ajaxurl.

Пример:

wp_enqueue_script( 'custom-ajax-request', '/path/to/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Nilambar Sharma

1.64K

19 авг. 2014 г. 12:20:32