Enviar json desde Angular a PHP

23 Abr

En mi corta carrera de programador Angular, siempre me ha tocado trabajar con proyectos de backend como NodeJs o Java, sin embargo nunca lo había hecho con PHP, a pesar de que ya llevo unos años trabajando en este último lenguaje.

Al intentar realizar una prueba, enviando datos mediante Ajax, noté que Angular envía Json, y PHP no trabaja con este tipo de datos, por lo cual necesitamos la forma de transformar este tipo de datos, de tal forma que ambas tecnologías se comuniquen. Este tipo de problemas no sucede por ejemplo con Angular y NodeJs, porque claro, ambos son Javascript, pero acá hablamos de Javascript y PHP.

Bien, por empezar vamos a descargarnos la librería de angular:

https://angularjs.org/

(En este ejemplo se trabaja con la versión 1)

Y vamos a guardarlo dentro de nuestro proyecto, yo lo haré en una carpeta con el nombre js.

Dentro de esta carpeta vamos a crear un archivo .js, al que yo llamaré: aplicacion.js con el siguiente código:

angular.module('aplicacion', [])
.controller('ControllerCampeonato', function($scope, $http){
   $scope.campeonato = {
      nombre: '',
      descripcion: '',
      integrantes: []
   };
   $scope.integrante_temporal = {
      nombre: '',
      apellido: ''
   };
   $scope.agregarIntegrante = function(){
      $scope.campeonato.integrantes.push({
         nombre: $scope.integrante_temporal.nombre,
         apellido: $scope.integrante_temporal.apellido
      });
      $scope.integrante_temporal.nombre = '';
      $scope.integrante_temporal.apellido = '';
   };
   $scope.eliminarIntegrante = function(index){
      var integrantes = [];
      angular.forEach($scope.campeonato.integrantes, function(integrante, i) {
         if(index != i){
            integrantes.push(integrante);
         }
      });
      $scope.campeonato.integrantes = integrantes;
   };
   $scope.enviar = function(){
      $http.post('enviar_campeonato.php', {
         data: {campeonato: $scope.campeonato}
      }).success(function(response){
         $scope.campeonato.nombre = '';
         $scope.campeonato.descripcion = '';
         $scope.campeonato.integrantes = [];
         console.log(response); 
      }).error(function(){
         alert('Error al intentar enviar el campeonato.');
      });
   };
});

Luego vamos a crear un archivo .html, que en donde vamos a incluir Angular y el archivo .js que acabamos de crear con el siguiente código:

<!DOCTPYE html>
<html ng-app="aplicacion">
<head>
 <meta charset="utf-8" />
 <title> Angular JSON </title>
 <script type="text/javascript" src="js/angular.min.js"></script>
 <script type="text/javascript" src="js/aplicacion.js"></script>
</head>
<body>
 <form ng-controller="ControllerCampeonato">
    <label> Nombre </label>
    <br />
    <input type="text" ng-model="campeonato.nombre" />
    <br />
    <label> Descripción </label>
    <br />
    <textarea cols="30" rows="10" ng-model="campeonato.descripcion"></textarea>
    <br />
    <label> Nombre integrante </label>
    <input type="text" ng-model="integrante_temporal.nombre" />
    <label> Apellido integrante </label>
    <input type="text" ng-model="integrante_temporal.apellido" />
    <input type="button" value="Agregar" ng-click="agregarIntegrante()" />
    <ul>
       <li ng-repeat="integrante in campeonato.integrantes">
          <a href="javascript:void(0);" ng-click="eliminarIntegrante($index)"> Eliminar </a>
          |
          {{ integrante.nombre }} {{ integrante.apellido }} 
       </li>
    </ul>
    <br />
    <input type="button" value="Enviar" ng-click="enviar()" />
 </form>
</body>
</html>

Nada complejo, un simple formulario que nos permite ingresar un nombre, descripción y una lista de integrantes con nombre y apellido.

Ahora, tenemos que crear el archivo .php que recibirá estos datos: enviar_campeonato.php.

Sin embargo si lo hacemos con el método tradicional:

var_dump($_POST);

Vamos a notar que nos devuelve un array vacío:

array(0) {
}

Esto se soluciona de la siguiente manera:

$json = file_get_contents('php://input');
$obj = json_decode($json);

De esta manera vamos a convertir un string con formato json:

data: {
   campeonato: {
      nombre: 'Nombre del campeonato',
      descripcion: 'Descripción del campeonato',
      integrantes: [
         {nombre: 'Fernando', apellido: 'Gaitán'},
         {nombre: 'Cosme', apellido: 'Fulanito'},
      ]
   };
}

En un objeto PHP:

<?php
 $json = file_get_contents('php://input');
 $obj = json_decode($json);
 //Nombre del campeonato.
 $obj->data->campeonato->nombre;
 //Descripción del campeonato.
 $obj->data->campeonato->descripcion;
 //Integrantes.
 foreach($obj->data->campeonato->integrantes as $item){
    //Nombre del participante.
    $item->nombre;
    //Apellido del participante.
    $item->apellido;
 }
 var_dump(json_encode($obj->data->campeonato));

Importante:

Las funciones json_encode() y json_decode() funcionan para trabajar con json:

  • json_encode(): Convierte un array o un objeto PHP en un string con formato json.
  • json_decode(): Convierte un string con formato json en un objeto php.

Saludos!

Ver ejemplo En Google Drive

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


    *