API Fetch en Laravel

En este apartado veremos como utilizar la API Fetch en laravel, actualmente esta es una sección de Utilizando Ajax en Laravel y le recomiendo su lectura.

La API Fetch, no es compatible con Internet Explorer, pero es de las más usadas cuando estamos usando frameworks o librerías como React, Angular, Vue esto se debe a que alguna de estas librerías vienen con un polyfill. Si no sabe lo que es un polyfill he dejado su definición a continuación.

Un polyfill es un fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa.
MDN

En caso de que la app que use no soporte fetch tendrá que ver que polyfill usar para poder usar fetch correctamente.

Para este ejemplo utilizaré el un formulario como el que se presenta a continuación.

A mi view la llamaré formulary2.blade.php, también hay que crear una ruta para utilizar esta vista.

resources/web.php

Route::get('formulary2',function(){
   return view('formulary2');
});

Mire esta vista con detenimiento, vea que pasamos 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') en los header, esto se debe a que estamos realizando un post en Laravel y por lo tanto tenemos que pasar el csrf-token.

resources/views/formulary2.blade.php

<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<h2>HTML Forms</h2>

<div>
  <label for="form_name">First name:</label><br>
  <input type="text" id="form_name" name="name"><br>
  <label for="form_surname">Last name:</label><br>
  <input type="text" id="form_surname" name="surname"><br><br>
  <button onclick='proccess();'>confirm</button>
</div>

<script>
function proccess(){
   let data={
      'name': document.getElementById('form_name').value,
      'surname': document.getElementById('form_surname').value
   }
   fetch('/proccess2', {
      headers:{
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(function(result){
      alert(result.message);
  })
  .catch(function (error) {
    console.log(error);
  });
}
</script>
</body>

Crearé una ruta proccess2. Nuevamente utilizaré Request asi que si estás probando este ejemplo no te olvides de poner:

use Illuminate\Http\Request;

routes/web.php

Route::post('proccess2',function(Request $request){
   $name = $request->input('name');
   $surname = $request->input('surname');
   $message = "tu nombre es ".$name."y tu apellido es ".$surname."";
   echo json_encode(compact('message'));
});

Category: laravel

Related Posts: Utilizando ajax con laravel

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.