Duda en implementación de Axios en Peticiones POST con PHP

publicado por: user75901

Tengo un ejercicio simple de sumar 2 números a través de un form que va desde html a php, de ahí me retorna el resultado; para que no se recargue la página uso axios y para mostrar los datos uso VueJS

Como muestro a continuación

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Hola</title>
</head>
<body>
 <div id="app" >
    <form method="POST" v-on:submit.prevent>
      <input type="text" v-model="numero1" name="numero1" />Primer Número
      <br><br>
      <input type="text" v-model="numero2" name="numero2" />Segundo Número
      <br><br>
      <button @click="sumaNumeros">Suma los Números</button>
    </form>
    {{ resultado }}
 </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script>
   new Vue({
    el: '#app',
    data:{
      numero1: '',
      numero2: '',
      resultado: ''
    },
    methods:{
      sumaNumeros: function(){
        axios.post('almacena.php', {
          numero1: this.numero1,
          numero2: this.numero2
        }).then((response) => {
          this.resultado = response.data
        })
      }
    },
    created: function(){
      this.sumaNumeros()
    }
   })
</script>
</body>
</html>

PHP

<?php

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

$numerosSumar = json_decode(file_get_contents('php://input'), true);

$numeroUno = (int)$numerosSumar['numero1'];
$numeroDos = (int)$numerosSumar['numero2'];

echo $numeroUno + $numeroDos;

Sin embargo como pueden notar he tenido que extraer los valores con file_get_contents() e incluso añadir al inicio de cada valor la directiva de int para indicarle que son valores numéricos ya que de otro modo me muestra errores.

La pregunta o preguntas es: ¿cómo logro recibir los valores de manera individual del siguiente modo?

$numero1 = $_POST['numeroUno'];

para que de ese modo también evite el uso de json_decode() y de file_get_contents();

//ACTUALIZACIÓN

Si por ejemplo dentro de PHP asigno a cada variable los valores que llegan del formulario:

$numeroUno = $_POST['numero1'];
$numeroDos = $_POST['numero2'];

echo $numeroUno + $numeroDos;

El resultado que obtengo es un error de este tipo

Notice: Undefined index: numero1 in
C:xampphtdocsajax-axiosalmacena.php on line 5

Notice: Undefined index: numero2 in
C:xampphtdocsajax-axiosalmacena.php on line 6
0

solución

Es un detalle de la forma en la cuál se envía los datos, haría falta crear un objeto FormData (como solución más próxima) para enviar a la petición de Axios y como posiblemente pueda que sea reutilizable en otros escenarios ( suponiendo un crud básico necesitarás el mismo formData) si no podría hacerlo directamente en el método sumaNumeros.

Crearíamos un método createdFormData (para el ejemplo) donde iteramos sobre el objeto que tiene los atributos (valores de entrada) y añadimos al formData . Ojo que el v-model ahora apuntará a cada propiedad del objeto que utilizamos para crear el formData

HTML

<div id="app" >
    <form method="POST" v-on:submit.prevent>
      <input type="text" v-model="objeto.numero1" name="numero1" />Primer Número
      <br><br>
      <input type="text" v-model="objeto.numero2" name="numero2" />Segundo Número
      <br><br>
      <button @click="sumaNumeros">Suma los Números</button>
    </form>
    {{ resultado }}
 </div>

Vue

new Vue({
    el: '#app',
    data:{
      objeto : {numero1: '', numero2: ''},
      resultado: ''
    },
    methods:{
      sumaNumeros: function(){
        axios.post('almacena.php',this.createdFormData())
        .then((response) => {
          this.resultado = response.data
        })
      },
    createdFormData : function (){
        var formDa = new FormData();
        for(var key in this.objeto){
            formDa.append(key, this.objeto[key]);
        }
        return formDa;
    },
    created: function(){
      this.sumaNumeros()
    }
   }
});

Con esto desde PHP accedería como siempre a través de $_POST y $_GET

$numeroUno = (int)$_POST['numero1'];
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *