Devolver datos de un servidor php mediante AJAX

Question

Saludos, estoy haciendo una prueba sencilla, se trata de enviar un dato mediante AJAX a PHP para que me devuelva un datos, pero no se porque no me devuelve ningún dato. EL codigo JavaScript es el siguiente:

$(document).ready(function(){

        $("#login").submit(function(){

            var data_form=$(this).serialize();

            $.getJSON("login2.php", data_form, procesar_datos);

            return false;

        });

});

function procesar_datos(devueltos){

            $("#contenidos_externos").html("<p>" + devueltos.edad + "</p>");

}

Y el script PHP el siguiente

$user = $_GET['usuario'];

$el_array = new stdClass();

if ($user=="Name") {

    $el_array->Nombre = "Name";
    $el_array->Apellido = "Gómez";
    $el_array->Edad = "18";
    $json = json_encode($el_array);
    echo $json;


}

Answer 1

Vamos a escribir el código jQuery según se indica en la documentación, manejando las respuestas mediante done y fail.

Usaremos también código actualizado. Por ejemplo, document.ready es obsoleto desde jQuery 3 (ver esta pregunta)

En cuanto al PHP, tenemos que darle todas las posibilidades. ¿Qué tal si ocurre un error? El PHP debe enviar en cualquier caso un json válido, el cual debe ser evaluado en la respuesta.

No se puede dar por supuesto que el código funcionará siempre como lo esperamos, puede haber datos erróneos y eso debe ser controlado siempre. Tu código no establece ningún control al respecto.

Veamos:

jQuery

    $(function() {
        var data_form={usuario:"Name"}; //usé una variable data_form temporal
        //$(this).serialize();

        var peticion = $.getJSON( "login2.php", data_form, function(data) 
        {
            console.log( "Petición enviada" );
        })

        .done(function(data) 
        {
            console.log( data);

            // Creamos una variable y evaluamos data
            var txtHTML;

            if (!data.Error)
            {

                txtHTML=data.Edad ;

            }else{

                txtHTML=data.Error ;

            }
            //Presentamos la variable según lo ocurrido
            $("#contenidos_externos").html("<p>" + txtHTML + "</p>");

        })

        .fail(function() 
        {
            console.log( "error en la petición ajax" );
        })     

    });

---

PHP

El PHP evalúa:

1. Si hay en realidad una variable usuario en GET
2. Si $user = Name

Ocurra lo que ocurra, crea un json con información sobre lo sucedido del lado del servidor. Luego, en la parte done de Ajax leerás el json para determinar lo que hay en él, por ejemplo, si hay error, imprimir el mensaje de error, y si no hay error, imprimir los datos de la persona.

<?php


    $user = $_GET['usuario'];

    // Hay que evaluar todas las posibilidades ...
    // No podemos suponer que todo funciona como debería funcionar
    if(!empty($user)) 
    {
        $el_array = new stdClass();

        if ($user=="Name") 
        {
            $el_array->Nombre = "Name";
            $el_array->Apellido = "Gómez";
            $el_array->Edad = "18";

        }else{

            $el_array->Error = "No existe la persona $user";
        }

    }else{

        $el_array->Error = "El dato Name no existe en la petición";

    }

    $json = json_encode($el_array);
    header('Content-Type: application/json');
    echo $json;

?>

---

HTML

<div id="contenidos_externos"></div>

---

Prueba

Me arroja esto en la consola:

[Log] Petición enviada (test.php, line 17)
[Log] {Nombre: "Name", Apellido: "Gómez", Edad: "18"} (test.php, line 22)

Y aparece la edad en la página.

Prueba también con datos erróneos y verás que el código funcionará siempre.

Espero te sirva.

Answer 2

Probaste agregando el header json en el php? ese es todo el codigo Php que usas? te falta esto

header('Content-Type: application/json');