4

estoy intentando enviar datos mediante utilizando fetch a un servidor PHP el asunto es que no se como accedo desde PHP a dicha propiedad, aquí dejo mi código JS:

function obtenerDatosSuma(e){

    e.preventDefault();

    //ALMACENAR LOS DATOS DEL FORMULARIO

    var mes = document.getElementById("selector").value;
    var cant_archivos = document.getElementById("archivos_input").value;
    var num_celda = document.getElementById("celda_num").value;


    var data2 = {

            mes: mes,
            num_archivos: cant_archivos,
            numero_celd: num_celda
    };



    fetch('http://localhost/PHP/controller/pruebaFetch.php', {
        method: 'POST',
        body: data2 
    })
    .then(function(data){

        return data.json();
    })
    .then(myJson => { 

        console.log(myJson);

    });

}

Pero desde PHP estoy intentando acceder a ello con esto:

$datos = $_POST['data2'];

Esto me lanza el error de que no esta definido data2

Notice: Undefined index: data2 in C:\xampp\htdocs\PHP\controller\pruebaFetch.php on line 3

La verdad no tengo idea de como se recogen los datos.

EDIT: Aqui mi codigo HTML

<form action="../controller/CalcularValor.php" method="post" id="form-suma" enctype="multipart/form-data">
    <div class="form-row">

        <div class="form-group col-sm-5">
            <label for="selector">MES</label>
            <select name="selector" id="selector" class="form-control">
                <option value="ENERO">ENERO</option>
                <option value="FEBRERO">FEBRERO</option>
                <option value="MARZO">MARZO</option>
                <option value="ABRIL">ABRIL</option>
                <option value="MAYO">MAYO</option>
                <option value="JUNIO">JUNIO</option>
                <option value="JULIO">JULIO</option>
                <option value="AGOSTO">AGOSTO</option>
                <option value="SEPTIEMBRE">SEPTIEMBRE</option>
                <option value="OCTUBRE">OCTUBRE</option>
                <option value="NOVIEMBRE">NOVIEMBRE</option>
                <option value="DICIEMBRE">DICIEMBRE</option>
            </select>
        </div>

    </div>

    <div class="form-row">
        <div class="form-group col-sm-5">
            <label for="archivos_input">Numero de archivos</label>
            <input type="number" name="archivos_input" id="archivos_input" class="form-control">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-sm-5">
            <label for="celda_num">NUMERO DE CELDA(Ej: A35)</label>
            <input type="text" name="celda_num" id="celda_num" class="form-control">
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-sm-5">
            <input type="submit" value="Calcular" class="btn btn-primary" id="btn_calcular">
        </div>
    </div>

</form>
0

3 respuestas 3

3

Te comento que lo puedes hacer de este modo, mediante el uso de FormData

Aquí accedes a los valores directo desde el form de tu página web

let formulario = new FormData(document.getElementById("iddetuformulario"))

Posterior puedes construir tu envio de datos con Fetch de este modo, donde como segundo argumento a la función le pasas la key method para indicar que tipo de verbo HTTP será, asì como en la etiqueta body el value formulario

fetch('http://localhost/PHP/controller/pruebaFetch.php', {
     method: "post",
     body: formulario
}).then((response) => {
     /*acciones a realizar*/     
}).then((data) => {
     /*mas acciones a realizar*/
})

De tal modo que puedas acceder a los elementos en PHP de este modo

$datos = $_POST['data2'];

Aclaración

Como estamos accediendo directamete al form por medio de su id, entonces no hay necesidad de declarar una variable distinta para capturar cada input que tiene el mismo dentro de si; es decir solo debes tener una variable con la cual lo accedas y después en tu petición fetch hagas body: data

Una vez hecho lo anterior, desde PHP accedes pero por medio de su atributo name, es decir

//debe ser de este modo
$dato = $_POST['name1'];
3
  • Hola @alfa p, gracias por el aporte, mucho mas fácil utilizando FormData. He probado tu respuesta y he intentado almacenar el valor enviado desde el formulario, y me da error de variable no definida, estoy intentando acceder desde PHP con $datos = $_POST['archivos_input']; archivos_input corresponde a el ID de un input en el HTML, voy a editar la pregunta para que le eches un vistazo al HTML
    – Marc P
    Commented el 15 mar. 2019 a las 8:36
  • @BrianHernandez recuerda que desde PHP no accedes a los inputs mediante su id sino mediante la etiqueta name, revisa la explicación que agregué al final de mi respuesta
    – user75901
    Commented el 15 mar. 2019 a las 8:38
  • Efectivamente! muchas gracias grande por corregir mi error y mis dudas. Un saludo :)
    – Marc P
    Commented el 15 mar. 2019 a las 8:53
2

Tienes que mandarlo serializado

fetch('http://localhost/PHP/controller/pruebaFetch.php', {
        method: 'POST',
        body: JSON.stringify({data2: data2}) 
    })

Y desserializarlo en php

$datos = json_decode($_POST['data2'], true);

$datos puede ser false o un array asociativo.

2
  • Hola, Me lanza un error de sintaxis Uncaught SyntaxError: Unexpected token :
    – Marc P
    Commented el 15 mar. 2019 a las 7:58
  • Perdona, eran llaves y no corchetes Commented el 15 mar. 2019 a las 8:00
1

Yo lo haria asi, envio un array y una variable normal:

En el JAVASCRIPT:

var data2 = {
  mes: '23-05-2022',
  num_archivos: 560,
  numero_celd: 23
};

fetch('http://localhost/PHP/controller/pruebaFetch.php', {
  method: 'POST',
  headers: {
   'Accept': 'application/json',
   'Content-Type': 'application/json'
  },
  body: JSON.stringify({'mi_dato_1':data2, 'mi_dato_2':'Hola', }) ,
}).then(function(data){
   return data.json();
}).then(myJson => { 
   console.log(myJson);
});

En mi PHP:

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

//este es un array
$array_pago_contador = $_post["mi_dato_1"];

//este es una variable normal
$estado_envio_contador = $_post["mi_dato_2"];

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.