Hola
En esta entrada vamos a ver cómo invocar métodos GET, POST, PUT y DELETE mediante jQuery.
Utilizaremos el API REST ofertado en la URL https://reqres.in/api
Montaremos una página HTML como la siguiente:
<!-- Definimos el documento como HTML 5 -->
<!DOCTYPE html>
<!-- Definimos el idioma de la página -->
<html lang="es">
<head>
<!-- Definimos el juego de caracteres de la página -->
<meta charset="UTF-8">
<!-- Definimos el autor de la página -->
<meta name="author" content="Eduardo García">
<!-- Describimos el titulo de la página -->
<title>AJAX y jQuery</title>
<!-- Describimos algunos términos clave de la página -->
<meta name="keywords" content="HTML5,CSS,JavaScript,jQuery">
</head>
<body>
<!-- Aquí el contenido de la página -->
<h1>AJAX&JQUERY I. Ejemplos de llamadas GET, POST, PUT y DELETE a un servicio REST.</h1>
<!-- Aquí meteremos los usuarios -->
<div id="usuarios"></div>
<!-- Definimos nuestras dependencia con jQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<!-- Definimos nuestros propios ficheros Javascript -->
<script type="text/javascript" src="js/ejemplo.js"></script>
</body>
</html>
El contenido de nuestro fichero javascript con jQuery 'ejemplo.js' sería:
/**
* En este ejemplo usaremos un servicio REST gratuíto que está
* disponible en Internet y que ofrece métodos GET, POST, PUT
* y DELETE para operar con 'usuarios'
*/
var urlListaUsuarios = "https://reqres.in/api/users?page=1";
var urlGetUsuario = "https://reqres.in/api/users/";
var urlAltaUsuario = "https://reqres.in/api/users";
var urlBajaUsuario = "https://reqres.in/api/users/";
var urlModificaUsuario = "https://reqres.in/api/users/";
$(document).ready(getListaUsuarios);
//$(document).ready(getUsuario(2));
//$(document).ready(altaUsuario);
//$(document).ready(bajaUsuario(2));
//$(document).ready(modificaUsuario(2));
/**
* Obtenemos por GET la primera página de una lista de usuarios
*/
function getListaUsuarios(){
$.getJSON(urlListaUsuarios)
.done(function(respuesta, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Recuperados los siguientes usuarios:</h3>");
$.each(respuesta.data, function(i,result){
$("#usuarios").append("<div>Id: "+ result.id +
" Nombre: " + result.first_name +
" Apellido: " + result.last_name +
" Foto: <img src="+result.avatar+"></img></div>");
});
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}
/**
* Obtenemos por GET los datos del usuario con el id recibido
*/
function getUsuario(idUsuario){
$.getJSON(urlGetUsuario+idUsuario)
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Recuperado el siguiente usuario:</h3>");
$("#usuarios").append("<div>Id: "+ result.data.id +
" Nombre: " + result.data.first_name +
" Apellido: " + result.data.last_name +
" Foto: <img src="+result.data.avatar+"></img></div>");
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}
/**
* Damos de alta a un nuevo usuario
*/
function altaUsuario(){
$.ajax({
type: "POST",
dataType: "json",
url: urlAltaUsuario,
data: {"name": "eduardo", "job": "developer"}
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Creado el siguiente usuario:</h3>");
$("#usuarios").append("<div>Id: "+ result.id +
" Nombre: " + result.name +
" Puesto: " + result.job +
" Fecha alta: " + result.createdAt );
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}
/**
* Damos de baja al usuario con el id recibido
*/
function bajaUsuario(idUsuario){
$.ajax({
type: "DELETE",
dataType: "json",
url: urlBajaUsuario+idUsuario
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Borrado correctamente el usuario: "+idUsuario+"</h3>");
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}
/**
* Modificamos los datos del usuario recibido por parametro
*/
function modificaUsuario(idUsuario){
$.ajax({
type: "PUT",
dataType: "json",
url: urlModificaUsuario+idUsuario,
data: {"name": "EduardoX", "job": "DeveloperX"}
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Modifiacdo correctamente el usuario: "+idUsuario+"</h3>");
$("#usuarios").append("<div>Nombre: " + result.name +
" Puesto: " + result.job +
" Fecha modificacion: " + result.updatedAt );
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}
No hay comentarios:
Publicar un comentario