Wordpress：Ajax 无法插入、查询和结果数据
Posted
技术标签:
【中文标题】Wordpress：Ajax 无法插入、查询和结果数据【英文标题】：Wordpress: Ajax not working to insert, query and result data 【发布时间】：2016-10-21 01:46:09 【问题描述】：在我的网站上，通过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：当我将“functions, the registration code, the query and theecho”中的代码直接插入到我的footer.php 中显示时，它可以工作。因此，我们可以理解错误甚至不在插入、查询或显示的代码中。
注意 2：我想在 modal boostrap 中显示数据库的返回。起初我只是在屏幕上显示，以检查一切是否正常。之后我会研究如何将这些数据放入modal，虽然不是本文的主要主题，但也欢迎提出如何做的建议。
【问题讨论】：
如果您使用 WordPress，应使用 'jQuery' 而不是 '$' 进行 jQuery 调用，以避免冲突并保持预期的最佳实践。 【参考方案1】：首先，你应该使用 $wpdb 对象来访问 Wordpress 中的数据库，包括 select。查看文档https://codex.wordpress.org/Class_Reference/wpdb
你没有具体说明你得到什么样的错误，但我认为你的ajax调用定义是错误的，应该是：
data:
action : 'prancha'
【讨论】：
这是AJAX本身的错误。字段error: function() alert('ERRO!!!');,
做了你建议的修改，仍然有同样的错误。
检查 Google Chrome 开发者控制台中的“网络”选项卡，了解请求中到底发生了什么。【参考方案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()。 p>
如您所见，'meuscript' 位于 wp_enqueue_script() 和 wp_localize_script() 两个函数中。
然后您将在您的jQuery 脚本中检索'meuajax' 和'ajaxurl'。
它们以这种方式组合：url: meuajax.ajaxurl, 而不是url: 'wp-admin/admin-ajax.php',。 wp_localize_script() 函数将通过admin_url( 'admin-ajax.php' ) 函数从您的jQuery script 到您的php 函数...
（新更新 - NOVA ATUALIZAÇÃO） 关于你的 cmets，你的答案/问题更新，还有这个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'];
这一次这是一个交钥匙解决方案，并且它将工作，一旦您调整了您的表单。
参考资料：
Wordpress passing ajax value to a specific page using Wordpress
Using AJAX With PHP on Your WordPress Site Without a Plugin
How to use Ajax with your WordPress Plugin or Theme?
How can I get form data with JavaScript/jQuery?
WPSE - Custom Form with Ajax
【讨论】：
【参考方案3】：首先，我感谢他们愿意提供帮助。 其次，我更喜欢在来这里提供反馈之前搜索更多关于如何解决我的问题的信息。
您发送给我的代码仍然无法正常工作。我做了一些改变，它部分工作。
我将 jQuery 中的submit 替换为 click，并将按钮类型替换为 text。
我将serialize() 的this 替换为我的表单ID。
jQuery(文档).ready(函数($)
$('#enviar').click(function(e) //我把SUBMIT换成了CLICK
var minhaprancha = $('#minhaprancha').serialize(); // 我用THIS 替换了我的表单ID
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() 是否工作正常！但是，在脚本结束时，浏览器控制台返回状态成功，值为零，并且没有执行函数prancha() 的操作。该数据未在数据库中注册。
我寻找其他方法来尝试制作工作代码：
获取字段的值，保存一个变量并在 ajax 中调用它。将表单的字段保存为直接data字段中声明的变量，并显示内部错误500
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时，它可以完美运行：
function meu_ajax_scripts()
wp_enqueue_script( 'meuajax', get_template_directory_uri().'/consulta.js', array('jquery'), '1.0', true );
wp_localize_script( 'meuajax', 'meuajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
add_action('wp_enqueue_scripts', 'meu_ajax_scripts');
function prancha()
if(!empty($_POST))
$nome = $_POST['nome'];
$email = $_POST['email'];
$estilo = $_POST['estilo'];
$experiencia = $_POST['experiencia'];
$altura = $_POST['altura'];
$peso = $_POST['peso'];
cadastra_usuario($nome, $email, $estilo, $experiencia, $altura, $peso);
function cadastra_usuario($nome, $email, $estilo, $experiencia, $altura, $peso)
global $wpdb;
$table = 'dados_usuario';
$data = array(
'nome' => $nome,
'email' => $email,
'estilo' => $estilo,
'experiencia' => $experiencia,
'altura' => $altura,
'peso' => $peso,
);
$updated = $wpdb->insert( $table, $data );
if ( ! $updated )
$wpdb->print_error();
die();
add_action('wp_ajax_prancha', 'prancha');
add_action('wp_ajax_nopriv_prancha', 'prancha');
我仍在努力研究各种博客、网站和论坛。
【讨论】：
以上是关于Wordpress：Ajax 无法插入、查询和结果数据的主要内容，如果未能解决你的问题，请参考以下文章
在 Wordpress 中上传 Ajax 文件 - 无法传递 FormData
Wordpress 无法通过 ajax 请求加载正确的语言 mo 文件