2

Estoy intentando enviar datos desde javascript por XHR a mi controlador en PHP.

Los datos de javascript los tengo alojados en la variable e y al darle console.log(e) me muestra los datos tal cual.

El problema está al implementar la petición XHR. Lo hago de la siguiente manera:

var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXobjet('Microsoft.XMLHTTP');
var ajaxUrl = base_url+'home/addApuesta';
var data = {'array': JSON.stringify(e)}
request.open("POST",ajaxUrl,true);
request.send(data);
console.log(request);

En el controlador recibo los datos POST de la siguiente manera:

if ($_POST) {
                $apuesta = json_decode($_POST, true);
                dep($apuesta);
                
            }

Cabe aclarar que dep() es una función que creé para depurar e imprimir de manera legible las matrices.

La respuesta en consola es la siguiente. Al parecer me llega vacía o null:

XMLHttpRequest {onreadystatechange: null, readyState: 1, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: null
readyState: 4
response: "\n"
responseText: "\n"
responseType: ""
responseURL: "http://miurl/home/addApuesta"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false

No llega los datos de javascript o no está siendo enviado. Agradezco si me pueden ayudar, muchísimas gracias.

2
  • var data = JSON.stringify(e), por cierto ¿qué contiene e?
    – Orici
    el 21 jul. 2021 a las 22:27
  • hola @Orici Muchas gracias por responder, Contiene un Json que envío desde php mediante un evento onclick(); cabe decir que funciona, al darle un console.log(e); me muestra efectivamente el Json que esta recibiendo (e) el 21 jul. 2021 a las 23:13

1 respuesta 1

2

Estás cometiendo muchas suposiciones incorrectas en tu código.

Cambios en PHP

Para empezar, la matriz superglobal $_POST está siempre definida, pero podría tener datos o no dependiendo del método HTTP usado y los datos POST enviados.

La mejor forma de comprobar la validez de los datos recibidos es comprobar la existencia del campo esperado (esté vacío o no) mediante isset():

if (isset($_POST['array')) { ... }

Además, el valor del formulario te llega en un índice de $_POST, por lo que debes usar json_decode() con dicho índice, y no con la matriz completa.

Te recomendaría que, en caso de que no se cumpla la condición, tu aplicación PHP devuelva algún texto para que permita depurar dicha situación. Como tu código PHP no funciona correctamente, la condición no se cumple (no se están enviando datos como formulario) y en ese caso recibe únicamente un retorno del carro (responseText: "\n"). Eso no te ayuda a depurar qué está pasando.

El código PHP modificado quedaría de la siguiente manera:

/* Comprobamos si el campo "array" fue enviado */
if (isset($_POST["array"])) {
    /* Decodificamos los datos JSON de dicho campo */
    $apuesta = json_decode($_POST["array"], true);
    /* Volcamos el contenido de los datos al navegador */
    var_dump($apuesta);
} else {
    echo "No se han recibido los datos POST requeridos";
}

Cambios en javascript

Por otro lado, estás enviando los datos de manera incorrecta a PHP. Debes codificar los datos como datos de formulario y no enviarlos como una matriz de javascript ({'array': ...}). Si lo haces así enviarás una cadena de caracteres que contiene algo como "[object Object]", ya que es el comportamiento por defecto del método Objeto.toString().

La mejor forma de conseguir esto último es a través de la clase FormData.

Por último, estás usando una petición asíncrona, pero vuelcas el contenido del estado justo tras solicitar la conexión, por lo que la propiedad XHR.readyState vale 1 (OPENED), que significa que se ha abierto la conexión, pero aún ni tan siquiera ha respondido el servidor (el próximo estado es cuando el servidor devuelve las cabeceras HTTP).

Cuando usas peticiones asíncronas debes usar XHR.onreadystatechange para hacer lo que quieras con la respuesta una vez que ésta haya concluido. Es decir, cuando XHR.readyState valga 4 (DONE).

PD: En los datos de la salida de la consola de depuración aparecen dos estados diferentes: cuando XHR.readyState valía 1 y cuando valía 4. Posiblemente obtuviste ese último valor de manera manual tras un transcurrir un tiempo, ¿verdad?.

Aquí tienes un ejemplo del código corregido:

var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXobjet('Microsoft.XMLHTTP');
var ajaxUrl = base_url+'home/addApuesta';
/* Los datos deben crearse como datos de formulario, no JSON */
var data = new FormData();
/* Podemos codificar los datos en JSON dentro del campo del formulario */
data.append("array", JSON.stringify(e));
/* Configuramos la petición POST, recuerda que es asíncrona */
request.open("POST", ajaxUrl, true);
/* Como es una petición asíncrona (true) tenemos que capturar el evento */
request.onreadystatechange = function (evento) {
  if (request.readyState == 4) {
     if(request.status == 200) {
       console.log(request.responseText);
     } else {
       console.log("Error cargando los datos");
     }
  }
};
/* Agregamos los datos del formulario */
request.send(data);
console.log(request);
4
  • 1
    amigo ta agradezco demasiado tu ayuda, me ayudaste un monton, muchísimas gracias! el 22 jul. 2021 a las 18:36
  • Siempre es un placer echar una mano :) si tienes un problema no dudes en dejarme un comentario para que le eche un vistazo a tu nueva pregunta. el 22 jul. 2021 a las 19:59
  • Muchas gracias jaja entonces aprovecho y te molesto de nuevo, estoy intentando eliminar un elemento de un array con unset() pero no se como filtrar los elementos del array para eliminar un elemento específico te dejo el link de mi pregunta por si deseas ayudarme muchisimas gracias [enlace]es.stackoverflow.com/questions/470613/… [enlace] el 23 jul. 2021 a las 2:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.