2

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:\xampp\htdocs\ajax-axios\almacena.php on line 5

Notice: Undefined index: numero2 in C:\xampp\htdocs\ajax-axios\almacena.php on line 6
0

12
  • Tu php esta devolviendo solo la suma de los numeros no? no deberias construir un json de respuesta con los dos valores?
    – gbianchi
    Commented el 29 mar. 2018 a las 21:12
  • si la suma la construye con los valores que le llegan del formulario HTML, pero al menos cuando lo intente solo me quedo haciendolo del modo en que posteo
    – user75901
    Commented el 29 mar. 2018 a las 21:13
  • es decir como extraigo u obtengo los dos valores que lleguen pero del modo que indico en la pregunta
    – user75901
    Commented el 29 mar. 2018 a las 21:14
  • y tu echo no deberia devolver un json? nunca vi que usaran php de backend, por eso pregunto
    – gbianchi
    Commented el 29 mar. 2018 a las 21:14
  • mi duda no es esa, mi duda es como obtener dichos valores del modo tradicional por asi decirlo $var = $_POST['valor1']; y no como lo he tenido que hacer
    – user75901
    Commented el 29 mar. 2018 a las 21:15

3 respuestas 3

4

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'];
1
  • 1
    gracias comprendí muy bien tu explicación y me soluciono la duda
    – user75901
    Commented el 29 mar. 2018 a las 22:16
2

Podrías tratar utilizando la función publicada en esta respuesta.

Básicamente convierte el objeto a un query string. O como comento @gbianchi, la documentación indica como solucionarlo.

<!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>
serialize = function(obj, prefix) {
  var str = [],
    p;
  for (p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p,
        v = obj[p];
      str.push((v !== null && typeof v === "object") ?
        serialize(v, k) :
        encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&");
}
   new Vue({
    el: '#app',
    data:{
      numero1: '',
      numero2: '',
      resultado: ''
    },
    methods:{
      sumaNumeros: function(){
        axios.post('almacena.php', serialize({
          numero1: this.numero1,
          numero2: this.numero2
        })).then((response) => {
          this.resultado = response.data
        })
      }
    },
    created: function(){
      this.sumaNumeros()
    }
   })
</script>
</body>
</html>
1
  • 1
    Pero no es un error. es la forma en que manda los datos
    – gbianchi
    Commented el 29 mar. 2018 a las 22:04
0

Puedes usar en tu archivo PHP:

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

Y usar los parametros del POST como variables.

Por ejemplo:

POST envia {"numero":1} y en el archivo PHP puedes usar la variable $numero

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.