PHP - Ajax me envia datos vacios al archivo php, ayuda por favor..

   
Vista:
Imágen de perfil de facundo

Ajax me envia datos vacios al archivo php, ayuda por favor..

Publicado por facundo (185 intervenciones) el 17/12/2017 00:04:58
Buenas gente como andan?

Estoy aprendiendo javascript y exactamente AJAX en este momento, estoy tratando de enviar info al archivo php con ajax pero me envia los datos vacios, seguramente es una boludes pero no puedo darme cuenta que es ya que todavia no manejo bien esto..

A TENER EN CUENTA: cuando hago console.log para verificar devuelve esto:
console.log(idLista); (devuelve el id seleccionado)
console.log(obj.responseText) (hace un log en la consola pero vacio, no aparece NULL ni 0 ni nada, simplemente un renglon en blanco)

Y en el archivo .php me capta que le estoy enviando info por POST pero haciendole var_dump a $_POST me devuelve un array vacio

Este es el archivo html:
1
2
3
4
5
6
7
8
9
<form action="" method="post">
    <select id="selector" name="selector">
        <option value="1">Seleccione...</option>
        <option value="2">Quiero ser el numero1 </option>
        <option value="3"> Quiero ser el numero 2</option>
    </select>
</form>
    <p id="respuestaAjax"></p>
<script src="scriptPrueba.js"></script>

archivo php:

1
2
3
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
            var_dump($_POST); //entra al IF pero devuelve array vacio
        }

Y aca el codigo javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var select = document.querySelector("#selector");
var obj;
select.addEventListener("change",cargarContenidoSeleccionado);
 
 
 
function cargarContenidoSeleccionado() {
    var idLista = select.value;   //selecciono el id seleccionado (viene por el listener change del select^^^^
 //   var url = "prueba.php";
    obj = new XMLHttpRequest();
 
    obj.addEventListener('load', respuestaAjax);
    obj.addEventListener('error', errorAjax);
 
    obj.open("POST", "prueba.php");
    obj.send(idLista);
    console.log(idLista);  //esto esta bien, me devuelve el value del option seleccionado
    console.log(obj.responseText); //si lo chekeo desde la consola me devuelve un renglon vacio
}
 
 
 
function errorAjax(){
    alert("Hubo un error en Ajax");
}
 
function respuestaAjax() {
    if (obj.status !== 200) {
        errorAjax();
    }
    if (obj.status === 200){
        setearRespuestaAjax(obj.responseText);
        console.log(obj.responseText);
    }
 
}
function setearRespuestaAjax(response) {
 
    document.querySelector("#respuestaAjax").innerHTML = response; //Renovamos el contenido de la lista en la vista, en base
    // a lo que nos trajimos del servidor.
}

Nose porque obj.responseText siempre me lo devuelve vacio.

Alguien tiene idea que puede llegar a ser?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Ajax me envia datos vacios al archivo php, ayuda por favor..

Publicado por Miguel (205 intervenciones) el 17/12/2017 09:33:42
Las peticiones AJAX funcionan de forma asíncrona. En este caso tienes que usar el evento onreadystatechange para acceder a la respuesta del servidor. Revisa el siguiente enlace : https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de facundo

Ajax me envia datos vacios al archivo php, ayuda por favor..

Publicado por facundo (185 intervenciones) el 17/12/2017 19:58:40
Hola, gracias por responder, ahora me voy a poner a leer eso.

Pero el ejemplo que tenia yo funciona de esa manera, osea con un listener, con la diferencia que en vez de enviar info a un archivo.php lo envia a server.js (servidor local con node), mira, el codigo es este, que de esta manera funciona, podrias decirme porque funciona de esta manera usando POST y un listener para el objeto ajax?
1
2
3
4
5
6
7
8
9
10
11
12
function cargarSuperHeroes(){ // function del tipo callback
	idSuperheroe = superheroe.value;
	var url = "http://localhost:3000/"; // Url del servidor
 
	obj = new XMLHttpRequest();
 
	obj.addEventListener('load',responseFunction); // Listener para el evento load del Ajax
	obj.addEventListener('error',errorFunction); //Listener para mostrar el error en Ajax
 
	obj.open("POST",url);
	obj.send(idSuperheroe);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox

Ajax me envia datos vacios al archivo php, ayuda por favor..

Publicado por abzerox (138 intervenciones) el 18/12/2017 01:11:15
Hola facundo, el problema por el cual no llegan los datos que envias es porque los estas enviando mal. Cuando realizas una petición POST y envias los datos en la cabezera http debes enviarlos de la forma siguiente:

1
clave=valor


Y si tuvieras que enviar más parámetros simplemente los encadenas utilizando el caracter & (ampersan):

1
clave=valor&otra_clave=valor

Te comparto un pequeño código que puedes adaptar para tus necesidades, estudialo modifcalo y pregunta cualquier duda que tengas. Al igual que Miguel te recomiendo que consultes la documentación de la MDN que tiene varios ejemplos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function encodeParams(data) {
    let params = typeof data == 'string' ? data : Object.keys(data).map(
        (k) => { return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
    ).join('&');
    return params;
}
 
function requestPOST(url, data, success, responseType) {
    let params = encodeParams(data);
    let request = new XMLHttpRequest();
 
    request.open('POST', url);
    request.responseType = responseType ? responseType : 'text';
 
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status == 200) {
            success(request.responseText);
        }
    };
 
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(params);
}
 
// Esta función es la encargada de procesar la respuesta en caso satisfactorio
function proccessResponse(resp) {
    console.log(resp);
}
 
const url = 'url';
const data = 'clave=valor'; // clave=valor Ejemplo => name=Jhon&email=jhondoe@mail.com
 
requestPOST(url, data, proccessResponse);
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de facundo

Ajax me envia datos vacios al archivo php, ayuda por favor..

Publicado por facundo (185 intervenciones) el 18/12/2017 22:32:48
Hola, gracias por responder! , uf, la verdad hay muchas cosas que desconosco de ese codigo, recien arranco con javascript, pero bueno cuando tenga tiempo me voy a poner a estudiarlo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad