Blog de programación, errores, soluciones
AJAX con jQuery en Laravel
En este artículo veremos como utilizar AJAX con jQuery en Laravel($.ajax) para cuando es usado método post. También sirve para put, delete, patch y options.
Teniendo instalado Laravel lo primero que debemos hacer es crear una ruta la cual será la url en nuestro AJAX en el archivo routes/web.php por ejemplo:
Creando una ruta ha nuestro controller
Lo que estamos haciendo aquí es creando una ruta la cual nos enviara al método index del AjaxController, por favor ten en cuenta tu versión de Laravel ya que declarar una ruta en laravel 8 es diferente a las versiones anteriores y dará que la ruta no fue encontrada.
versiones < Laravel 8 routes/web.phpRoute::post('miJqueryAjax','AjaxController@index');
o
a partir de Laravel 8 routes/webuse App\Http\Controllers\AjaxController;
Route::post('miJqueryAjax',[AjaxController::class,'index']);
Creando nuestro controller
Luego crearemos el Controller AjaxController, lo creamos en la carpeta App/Http/Controllers.
app/Http/Controllers/AjaxController.php<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AjaxController extends Controller {
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
echo "im in AjaxController index";//simplemente haremos que devuelva esto
}
}
Si esta haciendo esto desde 0 cree una ruta a la vista que usara.
routes/web.phpRoute::post('/', function () {
return view('master');
});
Cree la vista master
En la carpeta resources/views cree la vista master.blade.php las siguientes líneas, los comentarios dan ciertas indicaciones donde poner algunos fragmentos de código así que téngalos en cuenta.
resources/views/master.blade.php<!DOCTYPE html>
<html>
<head>
<title>this is my mater page</title>
<style></style>
//aqui ira meta token
</head>
<body>
<article>
<header>
<h1>this is my master page</h1>
</header>
<main>
</main>
<footer>
Ejemplo propuesto en blastcoding.com
</footer>
<article>
//pondre todos los script antes de cerrar la etiqueta body
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
//(español)pon el $ajaxSetup aqui . (english) copy $.ajaxSetup here
//(español)pon el $.ajax aqui . (english) copy $.ajax code here </body>
</html>
Recuerda que en este post lo único que buscamos es que ande ajax así que el ejemplo dado es lo más simple posible.
Agregando el token a todos los header request
Luego de las líneas de la ruta del CDN de jQuery cree un script con las siguientes líneas. Con este script estoy tomando el valor del token para pasarlo luego en la futura petición.
asegurate que el código es global$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Ahora hagamos nuestro script jQuery en las cuales utilizaremos AJAX le enviaremos datos a través de data en este caso será un JSON {'name':"luis"}.
$('#myajax').click(function(){
//we will send data and recive data fom our AjaxController
$.ajax({
url:'miJqueryAjax',
data:{'name':"luis"},
type:'post',
success: function (response) {
alert(response);
},
statusCode: {
404: function() {
alert('web not found');
}
},
error:function(x,xs,xt){
//nos dara el error si es que hay alguno
window.open(JSON.stringify(x));
//alert('error: ' + JSON.stringify(x) +"\n error string: "+ xs + "\n error throwed: " + xt);
}
});
});
Finalmente, luego de agregar la etiqueta meta para almacenar nuestro token, el script que añadirá nuestro token a todos los request a los headers solicitados(ajaxSetup) y agregar nuestro script para utilizar ajax(Evento on click) a nuestra vista quedaría de la siguiente manera.
resources/views/master.blade.php<!DOCTYPE html>
<html>
<head>
<title>this is my mater page</title>
<style></style>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<article>
<header>
<h1>this is my master page</h1>
</header>
<main>
<button id='myajax'>click me</button>
</main>
<footer>
</footer>
</article>
{{--all my scripts goes here--}}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type = "text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#myajax').click(function(){
//we will send data and recive data fom our AjaxController
//alert("im just clicked click me");
$.ajax({
url:'miJqueryAjax',
data:{'name':"luis"},
type:'post',
success: function (response) {
alert(response);
},
statusCode: {
404: function() {
alert('web not found');
}
},
error:function(x,xs,xt){
window.open(JSON.stringify(x));
//alert('error: ' + JSON.stringify(x) +"\n error string: "+ xs + "\n error throwed: " + xt);
}
});
});
</script>
</body>
</html>
IMPORTANTE: El ejemplo dado es para comprender como usar Ajax con jQuery en Laravel aunque no explica del todo como utilizar Ajax en jQuery. Probablemente haga un post sobre esto en el futuro.
En caso de no estar devolviendo el tipo de dato que jQuery espera por defecto, deberás especificar él dataType, a continuación dejo los datatype que jQuery admite:
dataType
- default: Intelligent Guess (xml, json, script, or html) trata de interpretar que tipo de datos le es devuelto
- xml
- html
- script
- json
- jsonp
- text
- text xml – espera texto que será interpretado como xml
- json text xml
- json xml
