Devolver JSON en PHP y obtener datos con AJAX

Devolver JSON en PHP y obtener datos con AJAX

¡Buenas! Nuevamente escribiendo un tutorial a finales de mes.
Mucho trabajo, por suerte.

Esta vez vengo a enseñar algo simple y útil: cómo devolver datos con PHP en formato JSON (objeto) y obtenerlos con jQuery AJAX. Además, veremos cómo enviar inputs HTML sin necesidad de tener un formulario.

Vista previa del ejemplo:

Obtener PHP JSON con jQuery AJAX

Datos enviados, mostrando la respuesta con JSON.stringify()

¿Cómo obtener JSON con AJAX?

En esta ocasión desarrollo en local con XAMPP 5.5.35-0 en Mac OS X.

1 de 2: HTML y JS

Lo primero es crear un documento que contenga 3 inputs. Lo más importante es asignarles un ID (único, por supuesto) para después obtener los valores con jQuery y enviarlos como un objeto a PHP. Antes del cierre de la etiqueta body debemos incluir la librería de jQuery. En este caso, yo uso la versión 2.1.0 minificada.

Añado un div con la clase respuesta para después mostrar el resultado.

Con jQuery asignamos a div.enviar la función de click para capturar ese evento, donde procederemos a recolectar los datos y enviarlos vía AJAX con POST.

Con la función done() obtendremos la respuesta (el objeto JSON) que nos devolverá PHP.
Al ser un objeto, podemos acceder a los datos muy fácilmente.

Yo, opcionalmente, devuelvo un resultado clave:valor llamado “estado” para poder gestionar los mensajes de error. Por ejemplo, algunas APIs devuelven el código de estado HTTP (200 OK, 204 No Content, 401 Unauthorized, etc.).

Nota: No es necesario definir el dataType como JSON en las opciones de AJAX, el sistema lo detecta automáticamente.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Obtener JSON con AJAX</title>
</head>

<body>
<h1>Datos para enviar a PHP</h1>

<input type="text" id="nombre" placeholder="Nombre" accept="text/plain"><br><br>
<input type="text" id="apellido" placeholder="Apellido" accept="text/plain"><br><br>
<input type="number" id="edad" placeholder="Edad" accept="text/plain">

<div class="enviar"><h3>Enviar</h3></div>
<hr>
<div class="respuesta"></div>

<script src="js/jquery-2.1.0.min.js"></script>
<script>
$(".enviar").click(function(e) {
	e.preventDefault();
	var nombre = $("#nombre").val(),
	apellido = $("#apellido").val(),
	edad = $("#edad").val(),

	//"nombre del parámetro POST":valor (el cual es el objeto guardado en las variables de arriba)
	datos = {"nombre":nombre, "apellido":apellido,"edad":edad};

	$.ajax({
		url: "datos.php",
		type: "POST",
		data: datos
	}).done(function(respuesta){
		if (respuesta.estado === "ok") {
			console.log(JSON.stringify(respuesta));

			var nombre = respuesta.nombre,
			apellido = respuesta.apellido,
			edad = respuesta.edad;

			$(".respuesta").html("Servidor:<br><pre>"+JSON.stringify(respuesta, null, 2)+"</pre>");
		}
	});
});
</script>
</body>
</html>
2 de 2: PHP

Ahora, en PHP, solo tenemos que obtener los valores enviados, setear el contenido como JSON, guardar los datos en un array y devolver el objeto con la función json_encode() que ofrece PHP.

Nota: Es importante mantener el parámetro JSON_FORCE_OBJECT.

<?php
//Obtenemos los datos de los input
$nombre = $_POST["nombre"];
$apellido = $_POST["apellido"];
$edad = $_POST["edad"];

//Hacemos las comprobaciones que sean necesarias... (sanitizar los textos para evitar XSS e inyecciones de código, comprobar que la edad sea un número, etc.)
//Omitido para la brevededad del código
//PERO NO OLVIDES QUE ES ALGO IMPORTANTE.

//Seteamos el header de "content-type" como "JSON" para que jQuery lo reconozca como tal
header('Content-Type: application/json');
//Guardamos los datos en un array
$datos = array(
'estado' => 'ok',
'nombre' => $nombre, 
'apellido' => $apellido, 
'edad' => $edad
);
//Devolvemos el array pasado a JSON como objeto
echo json_encode($datos, JSON_FORCE_OBJECT);
?>

Y listo. Ya podemos manejar los resultados del objeto JSON como requiera nuestro desarrollo.

Conclusión:

Algo bastante sencillo, ¿verdad? Por favor, recuerden sanitizar siempre cualquier dato que haya ingresado el usuario.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s