Ajax no retorna datos

[jhonalone]

Hola, sufridores encerrados.
Es la primera vez que intento utilizar Ajax con jQuery. Y soy completamente ignorante del tema.
Intento recibir una respuesta de MySql con ajax desde una pagina PHP.
Como recibo un arreglo vacío, me pongo a investigar y probar cosas y cosas....
Descubro lo que pienso que es el problema: en los datos que recibe el archivo .php, para hacer la llamada a MySql.
Resulta que la consulta a la base de datos se realiza incorrectamente porque la variable string que recibe el archivo PHP desde Ajax lleva al final dos corchetes [] os pongo el código:
Esta es la consulta con Ajax

if (theForm.NIF.value != '')
{
valorBusqueda = theForm.NIF.value;

$.ajax({
url: 'ver_si_dupliDNI.php',
data: {valorBusqueda},
type: 'POST',
success: function(response)
{
if(response.error)
{
warnInvalid(theForm.NIF,"Error al recibir información del la Base de Datos.","");
}else{ alert(response); // me devuelve []
let array_obtenido = JSON.parse(response);
siDupli = array_obtenido.length;
if (siDupli > 0)
{
warnInvalid(theForm.NIF,"Ya existe otro cliente con el mismo NIF.","");
}
}
}
});

}


Y este es el archivo PHP:

<?php
//Archivo de conexión a la base de datos
require ('../conexion.php');
//Variable de búsqueda
$consultaBusqueda = $_POST['valorBusqueda'];

$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

//Comprueba si $consultaBusqueda está seteado
if (isset($consultaBusqueda)) {
print('Busqueda2 = '.$consultaBusqueda); // Devuelve el NIF con corchetes: 12345678Z[]
$consulta = mysqli_query($conection, "SELECT * FROM cliente
WHERE nif = '%$consultaBusqueda%'
");
};

$json = array();
while($row = mysqli_fetch_array($consulta)) {
/// print('Busqueda2 = '.$row['nif']);
$json[] = array(
'nif' => $row['nif']
);
}
$jsonstring = json_encode($json);
echo $jsonstring;
?>

¡ Ah, en la base de datos existe un registro con nif=12345678Z! Que es el que envío desde Ajax.
Seguro que es una simpleza. Pero llevo todo el día con esto y no encuentro la salida.
Espero vuestra ayuda. Y ya, gracias por adelantado.
Saludos.

[dec]

Hola a todos,

Ahora estás enviando los datos de este modo:


data: {valorBusqueda}


Prueba a cambiar eso por algo como esto:


data: {"valorBusqueda": valorBusqueda}


La explicación es que "{}" define a un objeto en JavaScript, pero, un objeto tiene propiedades y valores, es decir, no podrías mandar, directamente, el valor, sino, que, dicho valor debe ser el de una propiedad del objeto en cuestión.

Prueba con eso y comenta por aquí si en efecto funciona como se espera.

P.D. No dejes de usar la consola de desarrollador del navegador (casi todos muestran la consola al pulsar la tecla F12). Es muy, muy útil, casi imprescindible, para ver posibles errores, advertencias, qué llamadas HTTP se realizan, qué parámetros se envían, cuál el la respuesta del servidor, etc.

[jhonalone]

Gracias David por responder tan pronto.

Siento decirte que ya lo había probado y el resultado es el mismo: "Busqueda2 = 12345678Z[]"
He leído muchos estos días sobre el tema de jQuery y Ajax. Y, no recuerdo dónde, leí que no eraa necesario los pares identificador:valor. Pero es igual, lo he vuelto a probar y el resultado es el mismo.

Te agradezco la sugerencia de la consola, no la he usado nunca, pero voy a probarlo. Puede que me aclare el error. Además me evito los alert y los print. Gracias. Te cuento.

Un saludo cordial.

[jhonalone]

Hola, David.
Gracias por aconsejarme el uso de la consola. HA SIDO MUY UTIL.
Te cuento. Al final he conseguido recibir los datos desde Ajax.

Si solicito un "alert" desde la función de Ajax, me edita correctamente los datos recibidos.

Pero no me basta con ver los datos. Lo que quiero es usarlos en la aplicación.

Al principio lo que me interesaba era recibirlos. Ahora quiero utilizarlos. He definido una variable "hidden" en mi formulario para recibirlos. Copio el código de la función de Ajax:

function checkDupli(theField)
{

valorBusqueda = theField.value;

$.ajax({
url: 'ver_si_dupliDNI.php',
data: {'valorBusqueda':valorBusqueda},
type: 'POST',

success: function(response)
{ //alert(response);
$("#dupliNIF").val(response);
if(response.error)
{
$("#dupliNIF").val("");

}
}
});
}


Es código javascript, pero lo pongo entre corchetes php porque se ve mejor resaltado (lo ví en un post tuyo de hace mucho).

La variable dupliNIF es la que está definida en el formulario como "oculta".

EL PROBLEMA:
Cuando intento recuperar el valor de dupliNIF me devuelve el valor original asignado en el formulario después de utilizar la función de control de campos.


function guardar(theForm)
{
if (theForm.NIF.value != '')
{
checkDupli(theForm.NIF);
//checkDupli(theForm.NIF);
}
alert(theForm.dupliNIF.value);

if (CamposValidos(document.myformula) == true)
{
var cli = document.getElementById("nombre").value;
//document.myformula.target = "_blank";
//document.myformula.submit();
document.getElementById("myformula").reset();
document.getElementById("NIF").focus();
swal({
background: '#FFFFDF',
type: 'success',
allowOutsideClick: false,
confirmButtonText: 'Cerrar',
text: 'El cliente indicado más abajo, se dió de alta correctamente.',
footer: cli,
animation: false
}); //swal

} // Campos Válidos

document.getElementById("NIF").focus();
return false; // tiene que ser false para que espere el mensaje. Si no borraría el mensaje y no esperaría para verlo
}; // Guardar


Ya sabemos que el código es JS, aunque ponga PHP.

Bien. El formulario ejecuta la función guardar(theForm) y al ejecutar el alert(theForm.dupliNIF.value); y, como puede verse se resetea.

Pues el resultado es que el mensaje alert(theForm.dupliNIF.value); reproduce el valor por defecto de el input dupliNIF.

ESO OCURRE LA PRIMERA VEZ que se envía el formulario.

Como el formulario se resetea en la funcion guardar(theForm), ¡¡curioso!!, (al menos para mí que soy un novato).

CUANDO SE RELLENA Y REENVIA EL FORMULARIO, al repetir la función guardar(theForm) y al ejecutar el alert(theForm.dupliNIF.value); ¡¡¡¡¡SORPRESA TOTAL!!!!! (AL MENOS PARA MÍ)

El resultado es que el alert muestra los valores recogidos en la consulta anterior de Ajax.

Ayuda, por favor, no entiendo nada.
Gracias por aguantar esta explicación tan extensa, pero creo que era necesario para dejar claro lo que está ocurriendo. (Para un mejor entendimiento de los expertos en este tema)

Gracias anticipadas y saludos cordiales.

[jhonalone]

Hola a todos.
Esto de Ajax me ha superado.
A pesar de todas las excelencias y virtudes que hay publicadas en la red, yo me rindo. No soy capaz de conseguir usarlo con provecho.
Voy buscar otra alternativa más "tradicional" : pasaré los valores por php y $_SESSION a ver qué pasa, porque llevo 3 ó 4 días completos intentando resolver este asunto.
Gracias por leerme e intentar ayudarme.
Saludos a todos.

[dec]

Hola a todos,

¡No puede ser que abandones! En mi opinión se están mezclando ya varias cosas... si me permites el consejo (pero no te lo tomes como tal, sino, como una forma de lograr el objetivo final), haz algunas pruebas con la llamada HTTP en segundo plano (que esto es lo que es AJAX, básicamente)... para estar seguro de que la información llega como esperas al servidor. Después podrías ponerte a mirar el resto de cosas, a ver qué puede estar ocurriendo. En definitiva, separa la llamada HTTP y el resto de cosas, paso por paso, para intentar hacerte con ello. Y no dejes de postear aquí si tienes alguna duda... a ver si podemos ayudarte.

[jhonalone]

Gracias David, por los consejos y por tu interés en ayudarme.

Veamos.
La consulta al servidor llega.
El retorno llega correcto.

El problema es que la asociación con el valor del campo HTML del formulario <input type="hidden" name="dupliNIF" id="dupliNIF" value="100"> no llega a tiempo de evaluar la respuesta de Ajax.
Aqui si llega:success: function(response)
{ //alert(response);
$("#dupliNIF").val(response);
{ El alert responde correctamente del servidor.
Pero cuando consulto el valor el input "dupliNIF"alert(theForm.dupliNIF.value); en la función de JS (después de ejecutar el código Ajax) "dupliNIF" no ha cambiaddo el valor.

Cuando hago otra consulta completa del formulario resulta que "dupliNIF" tiene el valor de la primera consulta. Intenté explicarlo anteriormente.

Ahora bien, he seguido "martirizándome" y (después de leer, buscar y probar mucho) he conseguido obtener el resultado en el primera consulta de la siguiente manera, pongo el código final de la función:function checkDupli(theField)
{
valorBusqueda = theField.value;

$.ajax({
url: 'ver_si_dupliDNI.php',
data: {'valorBusqueda':valorBusqueda},
type: 'POST',
cache : false,
async : false,
beforeSend: function(){},
success: function(response)
{ //alert(response);
$("#dupliNIF").val(response);
if(response.error)
{
$("#dupliNIF").val("");
}
}
});
}


Ahora me surge otro problema: obtengo en la consola de Chrome el siguiente mensaje:
jquery-3.5.0.js:9987 [Deprecation] Synchronous XMLHttpRequest
on the main thread is deprecated because of its detrimental effects
to the end user's experience.
For more help, check https://xhr.spec.whatwg.org/.

Ahora me preocupa cómo puede afectar ésto a los resultados de la página. He buscado en Google y parece ser que no es muy grave, que sólo puede retrasar la ejecución de la página.

¿Alguien puede explicarme los efectos reales de esta circunstancia?

Gracias.
Saludos.

[jhonalone]

Hola a todos.
Al final utilizaré Ajax "asincrónico".
Por si le interesa a alguien me inspiré en estos dos links uno (https://medium.com/front-end-weekly/ajax-async-callback-promise-e98f8074ebd7) y dos (https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron).
Saludos a todos.