2

Es la primera vez que intento hacer un método POST con fetch (no lo he hecho tampoco con ajax), estuve viendo alguno códigos pero la verdad me perdí mas de lo que pensé.

Lo que estoy queriendo hacer es enviar datos de 2 input que están en el formulario (modal) al controlador, pero sin recargar la pagina.

BLADE

<form role="form" class="form-horizontal" action="{{route("add_notas")}}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="modal fade" id="AddNotas" tabindex="-1" role="dialog" aria-labelledby="AddNotasLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddNotasLabel">Agregar una nota</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="recipient-name" class="col-form-label">Titulo:</label>
                    <input type="text" class="form-control-custom" id="recipient-name" name="titulo" required>
                </div>
                <div class="form-group">
                    <label for="descrp-text" class="col-form-label">Descripción:</label>
                    <textarea class="form-control-custom" id="descrp-text" name="concepto" required></textarea>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> cerrar</button>
                <button type="submit" class="btn btn-success" id="enviar"><i class="fas fa-check"></i> Guardar</button>
            </div>
        </div>
    </div>
</div>

JS

let boton = document.getElementById("enviar");

boton.addEventListener("click", function(e){
    e.preventDefault();
    var titulo = document.getElementById("recipient-name").value;
    var concepto = document.getElementById("descrp-text").value;

    var datos_form = {titulo: titulo,  concepto: concepto, };

    fetch('{{route("add_notas")}}',{
        method: 'post',
        body: JSON.stringify(datos_form)
        headers:{'Content-Type': 'application/json'}
    });
});

RUTA

Route::post('/dashboard/agregar/notas/post','ControladorNotas@add_notas')->name('add_notas');

CONTROLADOR

 public function add_notas(Request $datos){
   DB::table('tabla_notas')->insert([
      'titulo' => $datos->titulo;,
      'concepto' => $datos->concepto;
   ]);
   return 'ok';
 }
  1. Normalmente eso es lo que hago cuando hago un POST.
  2. El return siempre redirecciono al .Blade en este caso no se si tenga que retornar igual al mismo Blade a otro lado o usar algún método JSON etc... como comente al inicio primera vez haciendo esto.

EDIT:

aclarando el problema.

  1. No me guarda en la BDD.
  2. Se recarga la pagina (no quiero eso).
3
  • pues no me funciona.. no se si estoy recibiendo mal los datos en el controlador, se me recarga la pagina.
    – DAD
    el 11 jul. 2020 a las 6:01
  • @BetaM si eso hice, y manda error. The POST method is not supported for this route. Supported methods: GET, HEAD.
    – DAD
    el 11 jul. 2020 a las 6:03
  • @BetaM muchas gracias.
    – DAD
    el 11 jul. 2020 a las 6:05

1 respuesta 1

1
  • Primero deberías quitar el atributo action de tu formulario, pues ya desde fetch estás indicando la ruta a la que va a apuntar tu petición.

  • Posterior, el objeto que pasas como segundo argumento a la función fetch también acepta una clave que se llama: headers la cual a su vez es otro objeto y dentro del cual indicaremos el paso del token csrf que esta declarado en tu formulario y que debe viajar en la petición para que laravel la considere fiable y la procese.

  • Finalmente usaremos el constructor FormData para concentrar y enviar los datos por la petición AJAX

  • Dado que la API de fetch trabaja o esta contruida sobre promesas, debes acceder a las respuestas que esta te ofrece tanto si fue resuelta como si hubo un problema de red

    • Con data.exito leemos la respuesta del servidor, accediendo a la clave exito que declaramos en el backend de Laravel

Prueba tu petición de esta forma:

let boton = document.getElementById("enviar");
let csrf  = document.querySelector("input[name='_token']");
let titulo = document.getElementById("recipient-name");
let concepto = document.getElementById("descrp-text");

boton.addEventListener("click", function(e){
    let datos = new FormData();
    datos.append('titulo', titulo.value);
    datos.append('concepto', concepto.value);
    
    e.preventDefault();

    fetch('{{route("add_notas")}}',{
        method: 'post',
        headers: {
            'X-CSRF-TOKEN': csrf.value
        },
        body: datos
    }).then(response => response.json())
    .then(data => {
        console.log(data.exito);
    }).catch(error => {
        console.log(error.message);
    })
});

Por cierto a nivel de tu controlador, la respuesta se construiría de esta forma:

public function add_notas(Request $datos){
   $alta = DB::table('tabla_notas')->insert([
              'titulo' => $datos->titulo;,
              'concepto' => $datos->concepto;
              /*
                si tu tabla tiene las columnas de created_at y updated_at
                debes también en el insert asignarles un valor
              */
           ]);
   if($alta)
   {
        return response()->json(["exito" => "registrado"]);
   }
 }

De modo que cuando procesas la petición puedas recuperar la clave exito y pintes el mensaje que tiene asociado en la vista

8
  • Pues por lo visto ese no es el problema, sigue igual :/
    – DAD
    el 11 jul. 2020 a las 6:34
  • guardaba solo cuando estaba el action en el <form> pero eso era obvio, con js recargando o no sigue igual, no guarda datos.
    – DAD
    el 11 jul. 2020 a las 6:37
  • prnt.sc/tfrlho
    – DAD
    el 11 jul. 2020 a las 6:38
  • ok, muchas gracias!
    – DAD
    el 11 jul. 2020 a las 6:39
  • Efectivamente, ya guarda en la BDD prnt.sc/tfs5i3
    – DAD
    el 11 jul. 2020 a las 7:34

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.