可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
On my site, through a form I send/register same information in database, do a SELECT/query and return it! Return the last table saved in database, just that user just entered on the form (along with some more information coming from the database).
How I want to display these values coming from databse in a modal bootstrap it's necessary that the page doesn't give the refresh. For this, I inserted the AJAX as follows:
$(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);
}
});
});
});
In my functions.php file:
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');
The code is commenting, basically I did:
AJAX:
- In the field `URL` call the native Wordpress `admin-ajax.php`.
- In the field `DATA` call the function that makes the registration, query and displays to the user.
- In the `SUCCESS` field, prints the value of `data`.
FUNCTIONS: I make the registration code in database, do the query and print with the echo.
The AJAX is returning me the error message.
How can I solve this?
What am I doing wrong?
Note1: When I insert the code that is in my 'functions, the registration code, the query and theecho' to displays in a direct way, in my footer.php, it works. Therefore, we can understand that the error is not even in the code of insert,query or displays.
NOTE 2: I want to display the return of database within a modal boostrap. At first I'm just displaying on the screen, to check that everything is OK. After that I will research on how to put these data into the modal, although not the main subject of the post, suggestions for how to do this are also welcome.
回答1:
First of all, you should use $wpdb object to access the database in Wordpress, including the select. Check the documentation https://codex.wordpress.org/Class_Reference/wpdb
You didn't specify what kind of error you get, but I think your ajax call definition is wrong, it should be:
data: {
action : 'prancha'
}
回答2:
There is some mistakes in your code, but you have just missed a very important part of code,
to make it work, the wp_localize_script() function:
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' ) ) );
}
This code goes in the function.php file of your active theme (or child theme) folder… If it is a child theme you have to replace get_template_directory_uri() by get_stylesheet_directory_uri().
As you can see 'meuscript' is in both functions wp_enqueue_script() and wp_localize_script().
Then you will retrieve 'meuajax' and 'ajaxurl' in your jQuery script.
They are combined this way:
url: meuajax.ajaxurl, instead of url: 'wp-admin/admin-ajax.php',.
The wp_localize_script() function will make the bridge through admin_url( 'admin-ajax.php' ) function from your jQuery script to your php function…
(NEW UPDATE - NOVA ATUALIZAÇÃO)
regarding your comments, your answer/question update, and this thread too…
So here is your newly updated jQuery code (with a different approach related to form data). All the form data is serialized before being sent to your prancha() php function through ajax:
// 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);
}
});
});
});
Put this code in a js file ajax_script.js inside a js subfolder of your active theme (or child theme).
Your html form (an example like), has to be some kind of similar as this one:
<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>
Then you will retrieve (as you already know) the data values in your php with:
$nome = $_POST['nome'];
$email = $_POST['email'];
$estilo = $_POST['estilo'];
$experiencia = $_POST['experiencia'];
$altura = $_POST['altura'];
$peso = $_POST['peso'];
This time this is a turnkey solution, and it will work, once you have adapted your form to it.
References:
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:
First, I am grateful for their willingness to help.
Second, I prefer search more about how to solve my issue before coming here with feedback.
The code you sent me, still not working. I made some changes and it worked in parts.
- I replaced the
submit for click in my jQuery and I also replaced the type of my button for text.
I replaced the this of serialize() for id of my form.
jQuery(document).ready(function($){
$('#enviar').click(function(e){ //I replaced the SUBMIT for CLICK
var minhaprancha = $('#minhaprancha').serialize(); // I replaced the THIS for id of my form
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);
}
});
});
});
With these modifications, the code worked, but not perfectly. I put a alertto check if the serialize() was working and it is!. But, in the end of script, the browser console returns me status success, value zero and isn't being made the operation of the function prancha(). The data is not registered in the database.
I looked for other ways to try to make the work code:
Getting the values of the fields, keeping a variable and calling it in ajax. Both saving the fields of the form as a variable declared in direct data field and is displayed the Internal Error 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);
}
});
});
});
I also tried to call the values of the form fields in data : {} matrix and is displayed the error 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);
}
});
});
});
In my functions.php, I left only the part that insert the data in the database. To see the operation in parts. And remember that, when I put this code directly into my footer.php it works perfectly:
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');
I'm still researching on various blogs, websites and forums trying to work it.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/TZxxP.png', '推荐 叛逆 的文章《Wordpress: Ajax not working to insert, query and r》','https://www.manongdao.com/article-1189063.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}