Ajax не работает для вставки, запроса и получения данных.

На моем сайте, через form, я отправляю/регистрирую одну и ту же информацию в базе данных, выполняю SELECT/запрос и возвращаю ее! Возвращаю последнюю таблицу, сохраненную в базе данных, только что введенную пользователем в форму (вместе с некоторой дополнительной информацией из базы данных).

Чтобы отобразить эти значения из базы данных в modal bootstrap, необходимо, чтобы страница не обновлялась. Для этого я вставил AJAX следующим образом:

$(document).ready(function(){
      $('#enviar').click(function(){
          $.ajax({
          //Вызов AJAX в WORDPRESS 
          url: 'wp-admin/admin-ajax.php',
          type: 'POST',              
          //ВСТАВИТЬ, ЗАПРОС И ОТОБРАЗИТЬ ДЛЯ ПОЛЬЗОВАТЕЛЯ      
          data: 'action=prancha',                  
          error: function(){
              alert('ОШИБКА!!!');
          },
          //ЕСЛИ OK, ОТОБРАЗИТЬ ДЛЯ ПОЛЬЗОВАТЕЛЯ В DIV "RESULT"
          success: function(data){
              $('#result').html(data);
          }               
      });
    });
    });

МОИ FUNCTIONS.PHP:

function prancha(){
  header('Content-Type: text/html; charset=utf-8');

  include "../../../wp-config.php";

      /* ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ  */
  $nome = "";
  $email = "";
  $estilo = "";
  $experiencia = "";
  $altura = "";
  $peso = "";

  // ВАЛИДАЦИЯ
  if(!empty($_POST)){     
     $nome = $_POST['nome'];
     $email = $_POST['email'];
     $estilo = $_POST['estilo'];
     $experiencia = $_POST['experiencia'];
     $altura = $_POST['altura'];
     $peso = $_POST['peso'];

     cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso);
 }

  //ВСТАВИТЬ В БАЗУ ДАННЫХ ИМЯ, EMAIL, СТИЛЬ, ОПЫТ, ВЫСОТА И ВЕС
function cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso){          
    global $wpdb;

    $table="user";

    $data = array(      
      'nome' => $nome,
      'email' => $email,
      'estilo' => $estilo,
      'exp' => $experiencia,
      'altura' => $altura,
      'peso' => $peso,
    );

    $updated = $wpdb->insert( $table, $data );

    if ( ! $updated ) {
      $wpdb->print_error();
    }    
}   

//СОЕДИНЕНИЕ С БАЗОЙ ДАННЫХ ДЛЯ ВЫПОЛНЕНИЯ SELECT
include "db.php";

  function BuscaAlgo($conexao){

  // ЗАПРОС + INNER JOIN В БАЗЕ ДАННЫХ
 $query = "SELECT  USU.usuario,
                   USU.nome,
                   USU.exp,
                   USU.altura,
                   USU.peso,
                   PRAN.exp_ref,
                   PRAN.altura_ref,
                   PRAN.peso_ref,
                   PRAN.tipo_prancha,
                   PRAN.tamanho_prancha, 
                   PRAN.meio_prancha, 
                   PRAN.litragem_prancha       
                    FROM DADOS_USUARIO AS USU 
                         INNER JOIN PRANCHA AS PRAN
                             on USU.exp = PRAN.exp_ref
                              WHERE USU.altura = PRAN.altura_ref
                                AND USU.peso = PRAN.peso_ref
                                  ORDER BY USU.usuario DESC LIMIT 1";

  $resultado = mysqli_query($conexao,$query);

  $retorno = array();

  while($experiencia = mysqli_fetch_assoc($resultado)){
    $retorno[] = $experiencia;
  }

 return $resultado;
}

//ОТОБРАЖАЕТ ЗАПРОС ДЛЯ ПОЛЬЗОВАТЕЛЯ      
$resultado = array();
$resultado = BuscaAlgo($conexao);

foreach($resultado as $valor){
    echo $valor["usuario"]; print(".  .  .  ."); 
    echo $valor["nome"]; print(".  .  .  ."); 
    echo $valor["exp"]; print(".  .  .  ."); 
    echo $valor["altura"]; print(".  .  .  ."); 
    echo $valor["peso"]; print(".  .  .  ."); 
    print("///////");
    echo $valor["tipo_prancha"]; print(".  .  .  ."); 
    echo $valor["tamanho_prancha"]; print(".  .  .  ."); 
    echo $valor["meio_prancha"]; print(".  .  .  ."); 
    echo $valor["litragem_prancha"];  
}  

    die(); //КОНЕЦ ВЫПОЛНЕНИЯ
}
//ДОБАВИТЬ AJAX HOOKS В WORDPRESS
add_action('wp_ajax_prancha', 'prancha');
add_action('wp_ajax_nopriv_prancha', 'prancha');

Код прокомментирован, в основном я сделал:

AJAX:

• В поле `URL` вызовите встроенный в WordPress `admin-ajax.php`.
• В поле `DATA` вызовите функцию, которая выполняет регистрацию, запрос и отображает для пользователя.
• В поле `SUCCESS` напечатайте значение `data`.

ФУНКЦИИ: Я делаю код для регистрации в базе данных, выполняю запрос и печатаю с помощью echo.

Ошибки в AJAX возвращают мне сообщение об ошибке. Это ошибка самого AJAX. Поле error: function(){ alert('ОШИБКА!!!');},

Как я могу это исправить?
Что я делаю не так?

Примечание 1: Когда я вставляю код, который находится в моем ‘functions, код регистрации, запрос иecho’ для отображения напрямую в footer.php, это работает. Поэтому можно понять, что ошибка не в коде вставки, запроса или отображения.

ПРИМЕЧАНИЕ 2: Я хочу отобразить результат из базы данных внутри modal bootstrap. Сначала я просто отображаю на экране, чтобы проверить, что все в порядке. После этого я изучу, как поместить эти данные в modal, хотя это не основная тема поста, предложения о том, как это сделать, также приветствуются.

Я бы предложил погуглить “учебники по ajax wordpress”. Вот один, который был полезен для меня.
https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

Первая проблема, которую я вижу, заключается в том, что вы не указали, что ваша переменная ‘action’ является. JavaScript AJAX-запрос указывает, какая функция целевая в атрибуте ‘action’. В WP это крючок, который выполняет ваш серверный AJAX код. Вот как работают мои AJAX-запросы:

jQuery.post(ajaxurl,
    {"action" : "popover_content",
     "type" : this.data.subtype, 
     "key"  : this.data.key},
      function(content) {
        showPopover(e, content);
  }

Я создал свой собственный плагин WP (в соответствии с учебниками) для обработки AJAX-запроса. Код там выглядит следующим образом:

add_action( 'wp_ajax_popover_content', 'popover_content' );

function popover_content() {
...
}

Обратите внимание, что действие в JS, “popover_content”, соответствует крючку в add_action. Другими словами, если у вас есть add_action( wp_ajax_my_ajax_action, my_ajax_function), то переменная действия в JS должна быть my_ajax_action.

Также обратите внимание, что WP определяет глобальную переменную ajaxurl, так что вам не нужно указывать путь/имя admin-ajax.php.

Лично мне было проще заставить действие возвращать простое сообщение, пока я работал над AJAX-запросом на фронтенде; как только это сработало, выполнение запроса к базе данных и возврат содержимого было простым.

PS. Вы можете видеть, что я помещаю возвращаемое содержимое в всплывающее окно, поэтому разместить ваше содержимое в модальном окне должно быть легко.