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.

Read More

Lista arrastrable con jQuery, jQuery UI, AJAX, PHP y MySQL

¡Hola! En esta ocasión voy a mostrar como crea una lista que pueda ser ordenada siendo arrastrada. Esto se realiza gracias a la función Sortable de jQuery UI. El orden será enviado a través de la función AJAX de jQuery, procesado a través de PHP y almacenado en MySQL.

El resultado es este:

Notas iniciales:

Para este ejemplo estoy usando una versión custom de jQuery UI (v1.11.4) que únicamente incluye UI Core e Interactions (ver en la web oficial), pero se puede usar la versión completa sin problema. La versión de jQuery es la 2.1.1 minificada.

¿Cómo crear una lista arrastrable?

Read More

Generar SQL desde Arrays de inputs HTML5

¡Muy buenas! Este segundo tutorial del año se centrará en resolver una duda general: cómo obtener [en PHP] los datos de un formulario con inputs que sean arrays e insertar esos datos con SQL (por ejemplo, a MySQL).

Un ejemplo de los input array es este:

<input type="text" name="nombre[]">

Como se puede apreciar, el nombre del campo es nombre[], donde los corchetes hacen que el input con el mismo nombre sepa “auto-identificar” que es un array, y poder tener así varios inputs con el mismo nombre. Esto se utiliza generalmente cuando son necesarios varios inputs para procesar diferentes datos.

¿Cómo pasar cada dato a PHP?

Read More

Paginación con PHP y MySQL

Antes de comenzar con este tutorial, el cual será el último de este año 2015, quisiera agradecer a todos los que han compartido y comentado los tutoriales aquí expuestos. Más de 16.000 visitas avalan la confianza que ustedes, los lectores, tienen en estos textos.

Sin más dilación: pasemos a crear una paginación simple basada en PHP y MySQL.

¿Cómo crear una paginación?

Personalmente seguiré desarrollando en local, utilizando XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 3: MySQL

A diferencia de otros tutoriales, esta vez empezaré por la base de datos, pues es de ahí de donde debemos obtener los datos necesarios para proceder. Como siempre, estoy trabajando sobre una base de datos llamada mmv con cotejamiento utf8_spanish_ci. Dentro tengo una tabla llamada mmv004 que tiene tres columnas. El motor de almacenamiento es InnoDB.

  1. id -> INT(5) -> A_I -> primaria
  2. nombre -> varchar(20) -> utf8_spanish_ci
  3. edad -> INT(2)

Read More

Embeber video de YouTube eficientemente

Embeber un video de YouTube tradicionalmente puede llegar a consumir demasiado tiempo de carga. Hay que tener en cuenta que hay más archivos por cargar en nuestra web (CSS, Javascript, imágenes…).

En una simple prueba donde únicamente hay un video en un iframe en HTML5, sin nada más, podemos observar, según el network de Google Chrome: 20 peticiones, 594 KB transferidos, finalizado en 2.05 s.

Ay, Berto, qué majo eres.

En esa web el código que hay es el siguiente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe width="560" height="349" src="https://www.youtube.com/embed/uvqx3IIyzJ8" frameborder="0" allowfullscreen></iframe>
</body>
</html>

También podemos observar en la imagen que hay varios errores al intentar obtener “cast_sender.js”, pero por lo visto es un problema del código de YouTube.

¿Cómo reducir la carga del video embebido?

Con el siguiente código obtendremos, aproximadamente*, este resultado: 3 peticiones, 25.1 KB transferidos, finalizado en 708 ms.
Absolutamente nada comparado con los números anteriores: 20 peticiones, 594 KB transferidos, finalizado en 2.05 s.

*Puede llegar a variar según la longitud y la calidad del video.

Read More