Ejemplo de envío de formulario con AngularJS y PHP utilizando AJAX

Introducción

Los formularios son los más utilizados a la hora de necesitar información del usuario. Si estamos trabajando con AngularJS sería una ofensa enviar un formulario con los métodos que ya conocemos. Así que hoy mostraré un pequeño ejemplo de cómo enviar un formulario utilizando:

AJAX
AngularJS
PHP

Podemos cambiar a PHP por cualquier lenguaje del lado del servidor.

Código completo

Recomiendo ver el post completo y luego descargar el código completo. Lo dejo en GitHub: https://github.com/parzibyte/formulario_angularjs_php

Preparando el lado del cliente

App

Comencemos definiendo la app y el controlador, así como el código HTML. Al inicio, quedaría así:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Ejemplo de formulario</title>

 <!-- Cargar la librería principal -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

 <!-- Como nuestro script no será muy grande, podemos ponerlo en el HTML -->
 <script>
  angular
  .module("formularios", [])
  .controller("ControladorPrincipal", [function(){
   /*
    Aquí la magia
   */  }]);
 </script>
</head>
<body ng-app="formularios">
 <div ng-controller="ControladorPrincipal">
  {{ 5 + 5}}
 </div>
</body>
</html>

Notar por favor que he puesto un {{5 + 5}} para ver si no ha habido ningún error. Si no lo hay, se mostrará el número 10:

Esto es más que nada para verificar si todo ha ido bien. Si no, por favor verifica que has incluido la librería y que no has tenido errores de escritura.

Formulario

Hora de comenzar a crear el formulario. En este caso haré un formulario para guardar mascotas. Preguntaré su nombre, edad y raza. El código se vería como a continuación. Notar por favor que no he definido nada en el código Javascript.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Ejemplo de formulario</title>

 <!-- Cargar la librería principal -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

 <!-- Como nuestro script no será muy grande, podemos ponerlo en el HTML -->
 <script>
  angular
  .module("formularios", [])
  .controller("ControladorPrincipal", [function(){
   /*
    Aquí la magia
   */  }]);
 </script>
</head>
<body ng-app="formularios">
 <div ng-controller="ControladorPrincipal">
  <h2>Nueva mascota</h2>
  <form>
   <label for="nombre">Nombre: </label><br>
   <input id="nombre" type="text" placeholder="¿Cómo se llama la mascota?">
   <br><br>
   <label for="raza">Raza: </label><br>
   <input id="raza" type="text" placeholder="¿Cuál es su raza?">
   <br><br>
   <label for="edad">Edad: </label><br>
   <input id="edad" type="number" placeholder="¿Cúantos años tiene?">
   <br><br>
   <button>Guardar</button>
  </form>
 </div>
</body>
</html>

Simplemente agregué algunos campos de entrada. Es importante notar que a la edad le he asignado el tipo number, de esta manera AngularJS se encargará de convertir ese campo a un número.

Juntando modelo con formulario

Ahora vamos a meternos un poco con Javascript. Definiremos la variable que guardará la mascota (que será un objeto) y luego reflejaremos los cambios en el formulario. Así:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Ejemplo de formulario</title>

 <!-- Cargar la librería principal -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

 <!-- Como nuestro script no será muy grande, podemos ponerlo en el HTML -->
 <script>
  angular
  .module("formularios", [])
  .controller("ControladorPrincipal", ["$scope", function($scope){
   $scope.mascota = {};
  }]);
 </script>
</head>
<body ng-app="formularios">
 <div ng-controller="ControladorPrincipal">
  <h2>Nueva mascota</h2>
  <form>
   <label for="nombre">Nombre: </label><br>
   <input ng-model="mascota.nombre" id="nombre" type="text" placeholder="¿Cómo se llama la mascota?">
   <br><br>
   <label for="raza">Raza: </label><br>
   <input ng-model="mascota.raza" id="raza" type="text" placeholder="¿Cuál es su raza?">
   <br><br>
   <label for="edad">Edad: </label><br>
   <input ng-model="mascota.edad" id="edad" type="number" placeholder="¿Cúantos años tiene?">
   <br><br>
   <button>Guardar</button>
   <pre>{{mascota | json}}</pre>
  </form>
 </div>
</body>
</html>

Lo único que hicimos fue declarar una variable en el $scope. Y luego, a cada input le pusimos un ng-model refiriéndose a una propiedad de dicha variable.

La etiqueta que puse abajo (pre) fue para “depurar” y ver si realmente se están haciendo cambios. Podemos probar cambiando los valores, y veremos que se reflejan abajo y se muestra el objeto completo.

También es importante notar que la edad es un número (no trae comillas). Esto sirve cuando hacemos operaciones aritméticas, pues no tenemos que estar viendo si es cadena o número.

Hasta ahora se ve así:

Ahora sí ya tenemos vinculado nuestro modelo con la vista. Hora de programar el botón y mandar esos datos por AJAX.

Enviando datos

Para terminar con la programación del lado del cliente, vamos a escuchar al botón. Cuando hagamos click, haremos una petición POST a un archivo PHP. Le mandaremos (codificado con JSON, para intercambiar y mantener limpios los datos) el objeto mascota.

Para esto necesitamos el módulo $http que AngularJS ya trae. El código final se ve así:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Ejemplo de formulario</title>

 <!-- Cargar la librería principal -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

 <!-- Como nuestro script no será muy grande, podemos ponerlo en el HTML -->
 <script>
  angular
  .module("formularios", [])
  .controller("ControladorPrincipal", ["$scope", "$http", function($scope, $http){
   $scope.mascota = {};

   $scope.guardar = function(){
    $http.post("./recibir.php", angular.toJson($scope.mascota))
    .then(function(respuesta){
     /*
      Esto se ejecuta si todo va bien. Podemos leer la respuesta
      que nos dio el servidor accediendo a la propiedad data

      Recordemos que tenemos que decodificarla, ya que si enviamos con JSON
      deben respondernos con JSON (no es obligatorio, pero sí es una buena práctica)
     */     console.log("Petición terminada. La respuesta es: ", angular.fromJson(respuesta.data));

     /*
      Finalmente "limpiamos" el formulario
      estableciendo mascota a un objeto vacío
     */
     $scope.mascota = {};
    });
   };
  }]);
 </script>
</head>
<body ng-app="formularios">
 <div ng-controller="ControladorPrincipal">
  <h2>Nueva mascota</h2>
  <form>
   <label for="nombre">Nombre: </label><br>
   <input ng-model="mascota.nombre" id="nombre" type="text" placeholder="¿Cómo se llama la mascota?">
   <br><br>
   <label for="raza">Raza: </label><br>
   <input ng-model="mascota.raza" id="raza" type="text" placeholder="¿Cuál es su raza?">
   <br><br>
   <label for="edad">Edad: </label><br>
   <input ng-model="mascota.edad" id="edad" type="number" placeholder="¿Cúantos años tiene?">
   <br><br>
   <button ng-click="guardar()">Guardar</button>
  </form>
 </div>
</body>
</html>

Muy simple de explicar. Utilizamos $http.post para enviar datos al archivo recibir.php. Serializamos los datos con JSON para que viajen de forma segura. Escuchamos el click del botón y listo. Una vez que la petición haya terminado, imprimimos la respuesta en la consola.

Programando el lado del servidor

Vamos a hacer que los datos que se reciban sean escritos en un archivo txt simplemente para comprobar que realmente se están enviando. En la vida real puede que los guardemos en una base de datos, o algo así.

Es importante mencionar que AngularJS manda los datos de diferente manera que jQuery. jQuery por defecto los manda como si fueran un formulario, y accedemos desde PHP con $_POST. En cambio, AngularJS los manda para poder leerlos en el flujo de entrada de datos.

Otra cosa que hay que mencionar es que se tiene que hacer un echo, pues eso es lo que leerá la petición como resultado.

Hace algunos años cuando apenas aprendía AJAX, intenté hacer un return y no hubo resultados ¡jaja! ya que se tiene que imprimir algo, no regresar algo.

Pero bueno; hablar es de mal gusto. Aquí el código:

<?php

/*
 Leemos el flujo que hay en php://input
 Como codificamos los datos con JSON al enviarlos,
 al recibirlos tenemos que decodificarlos de la misma manera.

 Para ello, PHP provee el método json_decode: http://php.net/manual/es/function.json-decode.php
*/$mascota = json_decode(file_get_contents("php://input"));

# Ahora mascota sigue siendo un objeto, con propiedades. 
# Podemos acceder a ellas dependiendo de cómo las hayamos nombrado en el lado del cliente

$nombre = $mascota->nombre;
$raza = $mascota->raza;
$edad = $mascota->edad;


$mensaje = "Nombre: $nombre. Raza: $raza. Edad: $edad" . PHP_EOL; //Concatenar y poner salto de línea 

# Poner el mensaje en archivo. Utilizamos
# FILE_APPEND para que si ya hay datos, no se sobrescriban.
# Más información: http://php.net/manual/es/function.file-put-contents.php
file_put_contents("mascotas.txt", $mensaje, FILE_APPEND);



/*
 Ojo aquí: no hacer return, sino echo
*/
# Si nos mandaron los datos con JSON, respondamos con JSON ;)
echo json_encode($mensaje);
?>

Y listo ¡hemos terminado! Hora de probar

Probando app

Un GIF dice más que mil palabras:

Y con esto terminamos por hoy.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/