Creo que el
script es bastante claro, pero te lo explicaré línea por línea:
Delegamos el evento
click a todos los enlaces, para lo cual los tomamos por la
class que les hayas asignado. Cuando se dé un clic en cualquiera de los enlaces, se ejecutará una función anónima:
Código Javascript
:
Ver original$(".clase de los enlaces").on("click", function(event){
//...
});
Ya dentro de la función, como el comportamiento natural de un enlace es redireccionar, evitamos que se produzca dicha acción cancelándola con el método
.preventDefault():
Código Javascript
:
Ver original$(".clase de los enlaces").on("click", function(event){
event.preventDefault();
//...
});
Una vez cancelada dicha acción, procedo a realizar la petición asíncrona (AJAX) utilizando para ello el método
$.ajax(), en el cual solo tengo establecer la ruta de destino, misma que es la que posee el enlace pulsado en su atributo
href. Cuando se complete el proceso, podrás realizar las acciones que desees con la respuesta recibida en la variable
data:
Código Javascript
:
Ver original$(".clase de los enlaces").on("click", function(event){
event.preventDefault(); //Se cancela la redirección
$.ajax({
url: $(this).prop("href")
}).done(function(data){
//Instrucciones
});
});
Por ejemplo, si quisieras asignar la respuesta como contenido de un elemento:
Código Javascript
:
Ver original$(".clase de los enlaces").on("click", function(event){
event.preventDefault(); //Se cancela la redirección
$.ajax({
url: $(this).prop("href")
}).done(function(data){
$("#id del elemento").html(data);
});
});
