Home / Questions / 372677
Accepted
DAD
Asked: 2020-07-11 21:56:35 +0800 CST 2020-07-11 21:56:35 +0800 CST

Data sent in an Ajax request does not reach the controller

  • 772

It is the first time that I try to do a method POSTwith fetch(I have not done it with either ajax), I was seeing some codes but the truth is that I got lost more than I thought.

What I am wanting to do is send data from 2 inputthat are in the form (modal) to the controller, but without reloading the page.

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'}
    });
});

ROUTE

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

CONTROLLER

 public function add_notas(Request $datos){
   DB::table('tabla_notas')->insert([
      'titulo' => $datos->titulo;,
      'concepto' => $datos->concepto;
   ]);
   return 'ok';
 }
  1. Normally that's what I do when I make a POST.
  2. The returnalways redirect to .Bladein this case I don't know if I have to return the same Bladeto another side or use some method JSONetc... as I commented at the beginning the first time doing this.

EDIT:

clarifying the problem.

  1. It doesn't save me in the BDD.
  2. The page is reloaded (I don't want that).
javascript

1 Answers

  1. Best Answer

    • First you should remove the attribute actionfrom your form, since fetchyou are already indicating the route to which your request is going to point.

    • Later, the object that you pass as the second argument to the function fetchalso accepts a key that is called: headerswhich in turn is another object and within which we will indicate the passing of the token csrfthat is declared in your form and that must travel in the request so that laravel considers it trustworthy and processes it.

    • Finally we will use the FormData constructor to collect and send the data by the AJAX request

    • Since the fetch API works or is built on promises, you must access the answers that it offers you, whether it was solved or if there was a network problem.

      • With data.exitowe read the response from the server, accessing the key exitothat we declared in the Laravel backend

    Test your request like this:

    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);
    })
});

    By the way, at your controller level, the response would be built like this:

    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"]);
   }
 }

    So that when you process the request you can retrieve the key exitoand paint the message associated with it in the view

    • 1