Aquí aprenderás a como consumir un web Api REST utilizando Ajax desde jQuery, este tipo de consultas nos facilita bastante a la hora de consumir este tipo de servicios ya que nos permite hacer una consulta de manera asíncrona y sin la necesidad de tener que refrescar toda nuestra web para poder actualizar nuestro contenido.
Para empezar el tutorial deberemos tener a mano la siguiente librería de jQuery agregada en nuestro archivo.
Puedes descargarlas desde jQuery o bien puedes agregar el CDN de la librería:
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
Vamos a buscar un la pagina JSON Place Holder, para obtener un ejemplo de una estructura json tal como si fuera un web api, al hacer click en el enlace, veremos algo como esto.
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
Ya aqui tenemos lo necesario para empezar a trabajar nuestro archivo que consumira nuestro Web Api de ejemplo.
Bien este tipo de archivos debemos de colocarlo en algun ambiente servidor que tengamos disponible, ya sea uno contratado o en nuestra misma computadora, yo en este caso utilizo apache, pueden instalarlo a través de AppServer para que les instale el servicio Apache para el servidor, MySQL y PHP.
Luego de tenerlo instalado, nos dirigimos a la ruta C:\AppServ\www\ y crearemos una carpeta nueva, pueden utilizar el nombre que mas les guste, yo utilizare EjemploWebApi.
Dentro de la carpeta crearemos un archivo HTML, puede ser Index o como gusten.
Abrimos el archivo en nuestro editor de texto avanzado (Utilizo Sublime Text).
Haremos nuestro ezquema HTML tal cual se muestra en la imagen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body >
<table id="tabla" border=1>
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
</script>
</body>
</html>Ya luego de tener eso, vamos a crear nuestro script jQuery para poder consultar nuestro WebApi.
Debajo del cierre de nuestro archivo, tenemos un bloque <script></script> abierto, aqui insertaremos el codigo siguiente.
$(document).ready(function () {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts/",
dataType: "json",
success: function (data) {
$.each(data, function(i,item){
var row = "<tr>"+
"<td>" + item.id + "</td>" +
"<td>" + item.title + "</td>" +
"<td>" + item.body + "</td>" +
"</tr>";
$("#tabla>tbody").append(row);
});
}, //End of AJAX Success function
});
}); Para empezar nuestro script ajax en jQuery, tan solo debemos de colocar $.ajax({}); dentro de esos corchetes ira nuestra configuración que nos permitirá acceder al web api, la configuración es la siguiente:
TYPE: Aquí vamos a especificar el tipo de request que haremos al servidor o Web Api que vamos a utilizar, en este caso solo estamos utilizando método GET, bien pueden utilizar (GET, POST, DELETE,PUT).
- GET: lo utilizamos para simplemente obtener datos del Web Api.
- POST: lo utilizamos para poder enviar datos al Web Api o mejor dicho en caso que queramos insertar algún registro nuevo.
- DELETE: Se utiliza para indicar al Web Api que estamos requiriendo eliminar un registro.
- PUT: Con este le indicamos al Web Api que queremos actualizar un registro.
URL: Aquí colocaremos la dirección de nuestro Web Api, al que vamos a acceder, en el ejemplo tiene colocado la dirección que suministre mas arriba de JSON Place Holder.
DATATYPE: Con esto le indicamos a nuestro script el tipo de formato que estaremos recibiendo o consultando, mejor dicho el retorno de nuestro Web Api, en este caso seria “JSON”.
SUCCESS: En esta sección se lanza cuando el script ha completado el request al servidor, utilizamos esta sección para capturar nuestros datos a través de una función, en la que especificamos una variable para capturar nuestro retorno, dentro de la misma función, podemos indicar donde queremos mostrar la data o cualquier evento que vayamos a utilizar, en nuestro ejemplo definimos una estructura para el cuerpo de la tabla.
Como indicamos anteriormente, dentro de la función que agregamos al evento Success, colocamos la variable “data”, la misma, nos servirá para poder capturar los datos que nos devuelve nuestro web api, para obtener los datos en caso de que sea una colección de registros, debemos utilizar un bucle para poder recorrer de manera completa nuestra colección y mostrarla donde queramos.
En el ejemplo que tenemos, utilizamos un bucle “Each”, este tipo de bucle es propio de jQuery.
Trabaja con dos secciones $.each(primea,segunda):
- En la primera sección la utilizamos para indicarle la variable que vamos a recorrer, en este caso “data”.
- En la segunda sección le asignamos una función para poder capturar el record de cada registro uno por uno.
Esta función utiliza dos parámetros function(parámetro1,parametro2){},
- Parametro1: captura la posición de la fila recorrida 0,1,2,3,4,5 etc…
- Parámetro2: Captura el record de cada fila que el bucle esta recorriendo, para pode acceder a los datos, solo debemos de indicar el nombre de esta variable como se ve en el ejemplo “item” + punto + nombre de la seccion o variable del json que nos retorna el web api, en este caso serian.
item.id
item.title
item.body
Hasta aquí este pequeño tutorial de como consumir un web api rest desde jQuery con Ajax, te dejo un video de mi canal mas abajo explicando este mismo tutorial.
Buen tutorial, me ayudo bastante!!
🙂
heyyy thank you , it really helps me out !!!
Hey, thanks for sharing I always look forward to reading your posts one of the few blogs I still follow!
Wonderful blog! I found it while surfing around on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get
there! Thank you
I was wondering if you ever considered changing
the structure of your site? Its very well written; I love what youve got to say.
But maybe you could a little more in the way of content so people
could connect with it better. Youve got an awful lot of text for only having one or 2
pictures. Maybe you could space it out better?
I all the time used to read paragraph in news papers but
now as I am a user of web thus from now I am using net for content,
thanks to web. 0mniartist asmr
Hi my family member! I want to say that this article is awesome, great written and include almost all
vital infos. I’d like to peer more posts like this .
0mniartist asmr
I am curious to find out what blog system you happen to be working with?
I’m experiencing some minor security issues with my latest site and
I would like to find something more safe. Do you have any suggestions?
0mniartist asmr