Почему не работает Ajax?

Содержание

Вопрос или проблема
Ответ или решение
Прописка подключения
Пример создания плагина
Изменение вашего JavaScript кода
Включение отладки
Проверка функции
Заключение

Вопрос или проблема

У меня есть отдельная страница в корне WordPress для обработки определённых данных с подключенным файлом “wp-load.php”.

<?php

  require_once( dirname(__FILE__) . '/wp-load.php' );
  require_once( dirname(__FILE__) . '/wp-admin/includes/admin.php' );

  add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
  add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

  function example_ajax_request() {
    if ( isset( $_REQUEST ) ) {
      $postID = $_REQUEST['postID'];
      print $postID;
    }
    wp_die();
  }

?><!doctype html>
<html lang="ru" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Внешняя страница</title>

  <script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>

  <script>
    var ajaxurl = "<?php print admin_url( 'admin-ajax.php' ); ?>";
  </script>

  <script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
      $( '#our-work a' ).click( function( e ) {
        e.preventDefault();

        var postID = $( this ).attr( 'data-id' );

        $.ajax({
          url: './wp-admin/admin-ajax.php',
          data: {
            'action' : 'example_ajax_request',
            'postID' : postID
          },
          success : function( data ) {
            $( '#hero' ).append( 'Ну, это похоже работает' + data );
          },
          error : function(errorThrown){
            console.log( 'Это вызвало ошибку:' + errorThrown );
          }
        });
        return false;
      });
    });
  </script>

</head>

<body>

  <p id="our-work">
    <a data-id="123" href=".">Получить и отправить!</a>
  </p>

  <div id="hero"></div>

</body>

</html>

К сожалению, я получаю ошибку:

Почему код Ajax здесь не работает?

Нужно ли подключить какой-либо другой файл?

Вы должны переместить этот код в новый плагин, например, сохраните этот файл как wp-content/plugins/example-ajax-handler.php

<?php
/*
Имя плагина: Пример обработчика AJAX
Описание: Обработка запросов admin-ajax для example_ajax_request
Версия: 0.0.1
*/

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

function example_ajax_request() {
  if ( isset( $_REQUEST ) ) {
    $postID = $_REQUEST['postID'];
    print $postID;
  }
  wp_die();
}

Затем вам нужно активировать его из меню плагинов вашего административного сайта. Тогда он должен работать! См. документацию по основам плагинов.

Замените print $postID; на echo $postID;
Вставьте следующий код в файл functions.php (в папке вашей темы)

add_action( ‘wp_ajax_example_ajax_request’, ‘example_ajax_request’ );
function example_ajax_request()
{
if ( isset( $_REQUEST ) ) {
$postID = $_REQUEST[‘postID’];
echo $postID; } wp_die();
}
wp_die();
}

3. Для тестирования вам нужно включить функцию ведения журнала, вставьте следующий код в wp-config.php в корневой папке

    define( 'WP_DEBUG', true );
    // Включить ведение журнала отладки в файл /wp-content/debug.log
    define( 'WP_DEBUG_LOG', true );
    define( 'WP_DEBUG_DISPLAY', false );
    @ini_set( 'display_errors', 'Off' );

Вставьте эту строку в вашу функцию example_ajax_request

function example_ajax_request() {
  if ( isset( $_REQUEST ) ) { $postID = $_REQUEST['postID'];  
 error_log('тестирование ajax');
 echo $postID; } wp_die(); 
}

Ответ или решение

Чтобы решить проблему с вашим AJAX-запросом в WordPress, давайте проанализируем код и выделим ключевые моменты, на которые стоит обратить внимание.

Прописка подключения

Ваш код использует wp-load.php для подключения функций WordPress. Проблема в том, что через wp-load.php такие функции, как admin_url() и обработчики AJAX-запросов, могут не работать должным образом. Рекомендуется переместить обработку AJAX-запросов в отдельный плагин или в файл functions.php вашей темы. Как альтернатива, вы можете создать плагин для обработки AJAX-запросов.

Пример создания плагина

Сохраните следующее содержание в файл, например, wp-content/plugins/example-ajax-handler.php:

<?php
/*
Plugin Name: Example AJAX handler
Description: Обработка AJAX-запросов admin-ajax.
Version: 0.0.1
*/

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

function example_ajax_request() {
  if ( isset( $_REQUEST['postID'] ) ) {
    $postID = $_REQUEST['postID'];
    echo $postID; // Измените print на echo
  }
  wp_die(); // Завершение работы скрипта
}

Не забудьте активировать этот плагин в админке WordPress.

Изменение вашего JavaScript кода

В вашем JavaScript коде следует убедиться, что URL для AJAX-запроса установлен корректно. Вместо относительно указанного URL ./wp-admin/admin-ajax.php, используйте глобальную переменную ajaxurl, которая должна быть определена следующим образом:

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; // Используйте echo вместо print

Следующий код будет правильным:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#our-work a').click(function(e) {
      e.preventDefault();

      var postID = $(this).attr('data-id');

      $.ajax({
        url: ajaxurl, // Используйте переменную ajaxurl
        data: {
          'action': 'example_ajax_request',
          'postID': postID
        },
        success: function(data) {
          $('#hero').append('Well this seems to work: ' + data);
        },
        error: function(errorThrown) {
          console.log('This has thrown an error:' + errorThrown);
        }
      });
      return false;
    });
  });
</script>

Включение отладки

Для упрощения поиска ошибок, включите отладку в WordPress, добавив следующие строки в файл wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 'Off');

Это позволит вам отслеживать ошибки в файле wp-content/debug.log.

Проверка функции

Для тестирования AJAX-запроса можно добавить строку для записи логов:

function example_ajax_request() {
  if ( isset( $_REQUEST['postID'] ) ) {
    $postID = $_REQUEST['postID'];
    error_log('Testing AJAX: ' . $postID); // Логирование для проверки
    echo $postID; 
  }
  wp_die();
}

Заключение

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