0

tengo un pequeño inconveniente, tengo varios inputs los cuales recorro y obtengo los valores ingresados, estos los paso a un arreglo para posteriormente enviarlos con FETCH, no estoy muy familiarizado con este método, al querer verificar la llegada de estos datos a PHP para procesarlos no obtengo resultado.

Generalmente ocupo AJAX pero ahora quiero realizarlo con FETCH, supongo que el error radica en como estoy enviando el arreglo o en como trato de recibirlo en PHP, al parecer la petición si se hace.

Funciones donde obtengo los valores JS:

//DETECTAMOS CARGA DEL DOM
document.addEventListener("DOMContentLoaded", function() {
  //DETECTA EL CLICK DEL BOTON
  document.getElementById('send').addEventListener('click', function() {
   
    var inputs = document.querySelectorAll('.inputSearch');
    //INSTANCEAMOS EL ARREGLO PARA LOS VALORES DE LOS INPUTS
    var values = [];
    //RECORREMOS LOS INPUTS
    inputs.forEach(input => {
      //VALIDAMOS SI NO ESTAN VACIOS
      if (input.value != '' || input.value != 0) {
        //alert('Inputs con infomacion');
        values.push(input.value);
      } else {

      }
    });

    //COMPROBAMOS SI EL ARREGLO CONTIENE INFORMACION DE LOS INPUTS
    if (values != '') {
      //alert('Buscando...');

      fetch('BDOracle/searchData.php', {
          method: 'POST',
          body: JSON.stringify(values),
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then((res) => {
          return res.json()
          //console.log(res);
        })
        .then((json) => {
          console.log(json)
        })
        .catch((error) => {})
        .finally(() => {

        })
    } else {
      alert('No proporcionaste infomacion');
    }
    //console.log(values)
  })
})

Código PHP:

$arreglo = (array) json_decode($_POST['values']);
if ($arreglo != '') {
  echo json_encode('si llego algo');
  //echo json_encode($_POST['values']);
} else {
  echo json_encode('no llego nada');
}

Espero puedan orientarme.

1 respuesta 1

1

Hay unos cuantos problemas en tu código, intento enumerarlos por orden de aparición:

En la parte de Javascript

  1. Considera pasar en parámetro event en la escucha del envío del formulario, y seguidamente colocar event.preventDefault(), de lo contrario la página se recargará cada vez que aprietes en el botón enviar, lo cual no es deseable cuando usas Ajax o Fetch.
  2. No necesitas crear un array para pasarlo al servidor, es mejor crear un objeto, donde asociarás pares clave : valor por cada input. Aquí he usado como clave el valor de la propiedad name de cada input. Debes garantizar que los inputs tengan esa propiedad, puedes usar la propiedad id si lo prefieres. En cualquier caso, los elementos deben tener la propiedad que decidas usar.
  3. Puedes simplificar la sintaxis de fetch en los diferentes .then

En la parte de PHP

  1. Habitualmente, los datos pasados con Fetch o con Ajax deberían estar en la super global $_POST, pero no siempre ocurre así cuando usas Fetch. Realmente ignoro el motivo, pero en muchos casos los datos van al flujo de entrada de PHP.

    De modo que si no lo encuentras en $_POST puedes hacer lo siguiente:

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

    Aquí $json será un objeto que contendrá en forma de clave: valor lo que le hayas pasado desde el cliente, y podrás usarlo mediante la notación $json->clave. Si quieres puedes convertirlo a array, pero no es necesario.

  2. Con respecto a tu ejemplo, es un error creer que algo como esto produce un JSON válido: echo json_encode('si llego algo');. Eso lo que produce es una cadena. Si el cliente espera un JSON, debes crear en cualquier caso un array asociativo, así, cuando uses json_encode, sí tendrás un JSON válido donde cada clave del array será la propiedad del objeto y cada valor tendrá el dato asociado a esa clave. Es decir, algo así: echo json_encode(array('msg'=>'si llego algo'));

Aplicando lo dicho, el código Javascript quedaría así:

document.addEventListener("DOMContentLoaded", function() {
  /*
    Pasaremos event en parámetro
    y usaremos preventDefault() para evitar
    que la página se recargue cuando se envíe el formulario
  */
  document.getElementById('send').addEventListener('click', function(event) {
    event.preventDefault();
    var inputs = document.querySelectorAll('.inputSearch');
    /*
        No hay que crear un arreglo, sino un objeto
        donde asocias una clave por cada valor
    */
    var values = {};
    //RECORREMOS LOS INPUTS
    inputs.forEach(input => {
      //VALIDAMOS SI NO ESTAN VACIOS
      if (input.value != '' || input.value != 0) {
        /*
            Aquí asociamos clave : valor
            para la clave usamos la etiqueta name de cada input
            Es IMPORTANTE que tengan dicha etiqueta, si no la tienen
            puedes usar el id, cambiando input.name  por input.id
        */
        values[input.name]=input.value;
      }
    });
    /*
        Comprobamos que el objeto no está vacío
        NÓTESE que usamos Object.entries
    */
    if (Object.entries(values).length > 0) {
        fetch('BDOracle/searchData.php', {
          method: 'POST',
          body: JSON.stringify(values),
          headers: {
            "Content-Type": "application/json"
          }
        })
        /*
            Simplificamos la sintaxis de fetch
        */
        .then(res => res.json())
        .then(data => {
            /*
                Manejar los datos recibidos del servidor
            */
            console.log(data);
        })
        .catch((error) => {
            console.log(error);
        })
        .finally(() => {

        })
    } else {
      alert('No proporcionaste infomacion');
    }
  })
})

En el código PHP, simplemente recogeremos los datos enviados y los devolveremos de nuevo como JSON, para que los puedas ver en la consola del cliente. Recuerda lo dicho en el punto 2 de la parte de PHP y considera en todo momento crear un array para la respuesta y devolver dicho array con json_encode.

header("Content-type: application/json; charset=utf-8");
$json=json_decode(file_get_contents('php://input'));
echo json_encode($json);
exit();
3
  • Muchísimas gracias @A. Cedano, por el tiempo en dar tu respuesta y las explicaciones, recién comienzo a utilizar FETCH y tenia mis dudas que ahora me has resuelto, solo como ultimo favor, no comprendí mucho el funcionamiento de $json=json_decode(file_get_contents('php://input'));, si puedieras darme mas contexto del porque file_get_contents('php://input', de nuevo gracias. Commented el 20 jun. 2023 a las 18:20
  • @AntonioGalicia traté de explicarlo en el punto 1 de la respuesta bajo el título En la parte de PHP. Lo que se hace aquí $json=json_decode(file_get_contents('php://input')); es recoger los datos que fueron enviados en el flujo de entrada de PHP (php://input). El uso de json_decode y de file_get_contents juntos convierten esos datos en un objeto que se puede leer usando la notación $json->nombreDeLaClave. Es una alternativa, para aquellos casos en que los datos no vayan a la super global $_POST, cosa que ocurre muy a menudo cuando se usa la API Fetch de Javascript.
    – A. Cedano
    Commented el 21 jun. 2023 a las 16:20
  • Muchas gracias @A. Cedano, quedo mas claro. Commented el 21 jun. 2023 a las 17:11

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.