Question

在我的网站上，通过form我在数据库中发送/注册相同的信息，执行SELECT /查询并返回它！返回保存在数据库中的最后一个表，只是刚刚在表单上输入的用户（以及来自数据库的更多信息）。

我想如何在modal bootstrap中显示来自数据库的这些值，而页面不会提供刷新。为此，我按如下方式插入了AJAX：

$(document).ready(function(){
    $('#enviar').click(function(){
        $.ajax({
            //CALL AJAX IN WORDPRESS 
            url: 'wp-admin/admin-ajax.php',
            type: 'POST',              
            //INSERT, QUERY AND DISPLAYS TO USER      
            data: 'action=prancha',                  
            error: function(){
                alert('ERRO!!!');
            },
            //IF OK, DISPLAYS TO USER IN DIV "RESULT"
            success: function(data){
                $('#result').html(data);
            }               
        });
    });
});

在我的functions.php文件中：

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

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


      /* DECLARING THE VARIABLES  */
  $nome = "";
  $email = "";
  $estilo = "";
  $experiencia = "";
  $altura = "";
  $peso = "";

  // VALIDATION
  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);
 }


  //INSERT IN DATABASE NAME, EMAIL, ESTILE, EXPERIENCE, HEIGHT AND WEIGHT
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();
    }    
}   

//CONECT WITH DATABASE TO DO THE SELECT
include "db.php";

  function BuscaAlgo($conexao){

  // QUERY + INNER JOIN IN DATABASE
 $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;
}


//DISPLAYS THE QUERY TO USER      
$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(); //END THE EXECUTION
}
//ADD THE AJAX HOOKS IN 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正在向我返回错误消息。

我该如何解决这个问题？

我做错了什么？

注意1：当我插入我的＆＃39;函数, the registration code, the query and the echo＆＃39;中的代码时要以直接方式显示，在我的footer.php中，它可以正常显示。因此，我们可以理解错误甚至不在插入，查询或显示的代码中。

注2：我想在modal boostrap内显示数据库的返回。起初我只是在屏幕上显示，检查一切正常。在那之后，我将研究如何将这些数据放入modal，虽然不是帖子的主要内容，但也欢迎提出如何做到这一点的建议。

Answer 1

首先，您应该使用$ wpdb对象来访问Wordpress中的数据库，包括select。查看文档https://codex.wordpress.org/Class_Reference/wpdb

您没有指定您获得的错误类型，但我认为您的ajax调用定义错误，应该是：

data: {
  action : 'prancha' 
}

Answer 2

您的代码中存在一些错误，但您错过了代码的一个非常重要的部分，为了使其正常工作，wp_localize_script()函数：

add_action('wp_enqueue_scripts', 'meu_ajax_scripts'); 
meu_ajax_scripts(){
    // Register your script (located in a subfolder `js` of your active theme, for example here)
    wp_enqueue_script( 'meuscript', get_template_directory_uri().'/js/ajax_script.js', array('jquery'), '1.0', true );
    // Making the bridge between php and javascript:
    wp_localize_script( 'meuscript', 'meuajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

此代码位于活动主题（或子主题）文件夹的function.php文件中...如果是儿童主题，则必须将get_template_directory_uri()替换为get_stylesheet_directory_uri()。

正如您所看到的，'meuscript'同时包含wp_enqueue_script()和wp_localize_script()。

然后，您将在'meuajax'脚本中检索'ajaxurl'和jQuery。

它们以这种方式组合：
url: meuajax.ajaxurl,代替url: 'wp-admin/admin-ajax.php',。
wp_localize_script() 功能将通过您的admin_url( 'admin-ajax.php' )到jQuery script功能的php功能桥接......

（新更新 - NOVASYUALIZAÇÃO）
关于您的评论，您的答案/问题更新，以及此thread ......

所以这是您的新更新的jQuery代码（使用与表单数据相关的不同方法）。在通过ajax：

发送到prancha() php函数之前，所有表单数据都已序列化

// We use jQuery instead of $. Thanks to Phill Healey (see comments).
// Then we put back the $ shorthand in the function… 
jQuery(document).ready(function($){ 

    // Now we can use $ shorthand, avoiding javascript errors (with wordpress). 
    $('#enviar').submit(function(e){ // Updated            

        var minhaprancha = $(this).serialize(); // serializing the form data

        e.preventDefault(); // preventing form submit normal behavior

        //ajax call
        $.ajax({
            type:   'POST', 
            action: 'prancha', 
            url:    meuscript.ajaxurl, // the functional url     
            data:   meuscript.minhaprancha, // all the data of the form (serialized)

            // Displaying succes message
            success: function( data ){
                $('#result').html( 'Sucesso : '.data );
                // for debugging purpose in browser js console
                console.log(data);
            },

            // Displaying error message     
            error: function( error ){
                $('#result').html( 'Erro! : '. error );
                // for debugging purpose in browser js console
                console.log(error);
            }               
        });
    });
});

将此代码放在活动主题（或子主题）的js子文件夹中的js文件ajax_script.js中。

您的html表单（例如），必须与此类型相似：

<form method="post" id="minhaprancha"> // this id is important too (no "action" needed)

    <label for="Seu nome">From *</label>
    <input name="nome" id="nome" type="text" class="form-control" placeholder="Seu nome" required>
    <br />

    <label for="Seu email">From *</label>
    <input name="email" id="email" type="email" class="form-control" placeholder="Seu email" required>
    <br />

    <label for="Seu estilo">From *</label>
    <input name="estilo" id="estilo" type="text" class="form-control" placeholder="Seu estilo" required>
    <br />

    <label for="Seu experiencia">From *</label>
    <input name="experiencia" id="experiencia" type="text" class="form-control" placeholder="Seu experiencia" required>
    <br />

    <label for="Seu altura">From *</label>
    <input name="altura" id="altura" type="text" class="form-control" placeholder="Seu altura" required>
    <br />

    <label for="Seu peso">From *</label>
    <input name="peso" id="peso" type="text" class="form-control" placeholder="Seu peso" required>
    <br />

    <?php 
    // This imput hidden element has the name value of the php function ?>
    <input type="hidden" name="action" value="prancha"/>
    <input type="submit" id="enviar" name="enviar" value="Enviar">
</form>
<div id="result" class="result"></div>

然后您将使用以下命令检索（如您所知）php中的数据值：

 $nome = $_POST['nome'];
 $email = $_POST['email'];
 $estilo = $_POST['estilo'];
 $experiencia = $_POST['experiencia'];
 $altura = $_POST['altura'];
 $peso = $_POST['peso'];

这次是一个交钥匙解决方案，一旦您调整了表单，就能正常工作。

参考文献：

Answer 3

首先，我很感激他们愿意提供帮助其次，在收到反馈意见之前，我更愿意更多地了解如何解决我的问题。

您发给我的代码仍然无效。我做了一些改动，它在部分工作。

我在jQuery中替换了submit click，我也替换了text的按钮类型。
我将this的{{1}}替换为我的表单的ID。

jQuery的（文件）。就绪（函数（$）{ $（＆＃39;＃enviar＆＃39;）。点击（功能（e）{//我替换了serialize() SUBMIT var minhaprancha = $（＆＃39;＃minhaprancha＆＃39;）。serialize（）; //我将CLICK替换为我的表单的ID
```
THIS
```
}）;

通过这些修改，代码可以工作，但并不完美。我放了一个e.preventDefault(); // preventing form submit normal behavior $.ajax({ type: 'POST', url: meuajax.ajaxurl, data: meuajax.minhaprancha, success: function( data ){ $('#resultado').html( 'Sucesso : ' + data ); console.log(data); }, error: function( error ){ $('#resultado').html( 'Erro! : ' + error ); console.log(error); } }); });来检查alert是否正常工作，它是！但是，在脚本结束时，浏览器控制台会返回状态成功，值为零，并且不会使函数serialize()运行。数据未在数据库中注册。

我寻找其他方法来尝试制作工作代码：

获取字段的值，保留变量并在ajax中调用它。两者都将表单的字段保存为在直接prancha()字段中声明的变量，并显示内部错误500

data

我还尝试在jQuery(document).ready(function($){ $('#enviar').click(function(e){ var minhaprancha = '$nome='+$("#nome").val()+ '&email='+$("#email").val()+ '&estilo='+$("#estilo").val()+ '&experiencia='+$("#experiencia").val()+ '&altura='+$("#altura").val()+ '&peso='+$("#peso").val(); //GETTING THE VALUES OF FIELDS e.preventDefault(); // preventing form submit normal behavior $.ajax({ type: 'POST', url: meuajax.ajaxurl, data: { action: 'prancha', minhaprancha }, success: function( data ){ $('#resultado').html( 'Sucesso : ' + data ); console.log(data); }, error: function( error ){ $('#resultado').html( 'Erro! : ' + error ); console.log(error); } }); }); });矩阵中调用表单字段的值，并显示错误data : {}。

Maximum call stack size exceeded

在我的jQuery(document).ready(function($){ $('#enviar').click(function(e){ e.preventDefault(); // preventing form submit normal behavior $.ajax({ type: 'POST', url: meuajax.ajaxurl, action: 'prancha', data: { 'nome':nome, 'email':email, 'estilo':estilo, 'experiencia':experiencia, 'altura':altura, 'peso':peso }, success: function( data ){ $('#resultado').html( 'Sucesso : ' + data ); console.log(data); }, error: function( error ){ $('#resultado').html( 'Erro! : ' + error ); console.log(error); } }); }); });中，我只留下了在数据库中插入数据的部分。要查看部分操作。请记住，当我将此代码直接放入我的functions.php时，它可以完美地运行：

footer.php

我还在研究试图使用它的各种博客，网站和论坛。

Wordpress：Ajax无法插入，查询和结果数据

3 个答案: