0

Cuando le doy al submit, la página entra en un blucle esperando respuesta hasta que se lanza el timeout. La rutas han sido correctamente establecidas y el formulario situado en post. Lo datos son ingresados correctamente al enviarlos por POSTMAN.

Aquí el archivo .js con el método para registrar los datos.

MODIFICADO

El cual es llamado por:

MODIFICADO

EDIT

Le agregué el body a la petición fetch, pero sigue sin funcionar, aquí el código:

HTML

<form action="http://xx.xx.205:3001/api/pedidos/registrar" method="POST" onsubmit="registrar(this)"></form>


async function registrar(data){
    data = $(data).serialize();
    const res = await fetch(`http://${ip}:${puerto}/api/pedidos/registrar`, {
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        },
        method: "POST"
    });
    const jsonData = await res.json();
    return jsonData.data;
}

EDIT 2

He modificado un tanto el código en función de lo sugerido por Riven, a continuación adjunto la función que controla el registro/modificación

async function registrar(ev, data){
    ev.preventDefault();
    data = $(data).serialize();
    const string = $('form').attr('action').split('/')[5];
    if(string == 'registrar') action = 'POST';
    else if(string == 'modificar') action = 'PUT';
    const res = await fetch(`http://${ip}:${puerto}/api/pedidos/${string}`, {
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        },
        method: `${action}`
    }); 
    const jsonData = await res.json();
    return jsonData;
}

Fragmento HTML:

<form action="http://138.197.205:3001/api/pedidos/registrar" method="POST" onsubmit="registrar(event, this)">
8
  • ¿Qué datos estás enviando? Falta body en el fetch()
    – Triby
    el 4 jun. 2020 a las 22:38
  • Son varios, principalmente strings del body, a través de inputs, selects y textareas. Lo probaré de inmediato, suena como la solución inequívoca jajaja
    – Jean Louis
    el 4 jun. 2020 a las 22:45
  • Me refiero a que no estás enviando información fetch('url', { header:{}, method:'POST', mode: 'CORS', body: datosEnviados }) te falta body
    – Triby
    el 4 jun. 2020 a las 22:59
  • Hecho! Hice un edit al final, pues me sigue sin funcionar
    – Jean Louis
    el 4 jun. 2020 a las 23:26
  • Adjunté el error en el edit
    – Jean Louis
    el 4 jun. 2020 a las 23:48

1 respuesta 1

0

Hay unos cuantos errores, entre ellos:

  • Recargas la pagina tu mismo al enviar la data
  • usas el await de un await
  • Por lo que se creo que no estas previniendo que la pagina se recargue (el formulario se envia).

Para lo primero deberas prevenir el envió de tu formulario (puesto que si lo envías por fetch entonces para que quisieras enviarlo también por el form?), así que lo que primero que debes hacer es en tu HTML acomodar la función de tal forma que envié el evento y el formulario, y no solo el formulario:

<form action="http://xx.xx.205:3001/api/pedidos/registrar" method="POST" onsubmit="registrar(event, this)"></form>

Lo segundo que debes hacer es prevenir que se envié el formulario, como había dicho previamente, ademas debes modificar la funcion para que ahora acepte dos paramentros (el evento y el formulario) entonces en la función registrar al inicio del todo prevenimos el envió del form con un preventDefault:

async function registrar(ev, data){
    
    ev.preventDefault();
    data = $(data).serialize();
    const res = await fetch(`http://${ip}:${puerto}/api/pedidos/registrar`, {
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        },
        method: "POST"
    });
    const jsonData = await res.json();
    return jsonData.data;
}

Ademas de esto, he visto que en esta parte tienes un location.reload lo cual no es buena idea, puesto que su proposito no lo veo claro (para que recargar la pagina?), recargar la pagina no hara que la pagina te obtenga la data, por lo que deberas quitar:

location.reload();

al final de:

$('.registrar').click( async function() {
    $('form').attr({"action": "http://xx.xx.205:3001/api/pedidos/registrar", "method": "POST"});
    const ret4 = new Registro();
    const wath = await ret4.registrar();
    location.reload();
});

Para el error respecto al (usar await de un await) vi que lo corregiste en tu segunda edicion, por lo que no hondare al respecto puesto que ya lo haz solucionado.

Una cosa mas a tener en cuenta es que las claves y valores enviados por tu body en fetch van de acuerdo a el atributo name de los inputs que tengas dentro de tu form, donde el atributo name del input siempre hara referencia a la key del json, mientras que el atributo value hara referencia al valor del json a enviar.

Deberás asegurarte que tus inputs tengan un name y corresponda con el nombre de dato que quieres tener en tu json.

Si esto no funciona, asegurate de mirar que es lo que te devuelve el backend antes de hacer res.json():

console.log(res);
const jsonData = await res.json();

Si el resultado no es un JSON, el error viene de parte del servidor, o estas enviando data incorrecta a este, y este te esta devolviendo un error.

De hecho ahora que me doy cuenta, y esto es importante:

Estas usando serialize() de jQuery, serialize() seria perfecto si estuvieses usando $ajax de jQuery ya que lo puedes usar directamente, pero para el caso de fetch, como se trata de una peticion POST, recuerda que las peticiones POST no reciben parametros tipo urlFormEncoded ya que eso es enrealidad lo que devuelve serialize() y por supuesto no puedes hacer JSON.stringify() a algo que directamente NO es un JSON.

asi que la solucion a ello es primero tratar de darle un formato tipo JSON a un URLEncodedString, por lo tanto:

function encodedURLtoJSON(urlEncodedString){
   
   const fullValues = urlEncodedString.split("&");
   const keys = fullValues.map(el => el.split("=")[0]);
   const values = fullValues.map(el => el.split("=")[1]);
   const obj = {};

   for(let i = 0; i < keys.length; i++){
      obj[keys[i]] = values[i];
   }

   return obj;

}

const data = encodedURLtoJSON("name=Juan&edad=16&terminos=true");
console.log(data);

Ese ejemplo lo puedes aplicar a tu codigo, siendo que en esta parte, en vez de usar directamente $(data).serialize(); deberas usar la nueva funcion para convertir ese UrlFormEncoded a un Objeto de Javascript:

data = encodedURLtoJSON($(data).serialize());

De esta manera al hacer JSON.stringify no obtendras el error.

1
  • Tremenda respuesta! Te escribo en seguida...
    – Jean Louis
    el 5 jun. 2020 a las 0:28

Tu Respuesta

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

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