¿Cómo integrar JavaScript en una aplicación web para cargar libros dinámicamente?
Introducir JavaScript en una aplicación web no solo mejora la interactividad, sino que también permite realizar acciones más complejas como cargar contenido dinámicamente. En este artículo, exploraremos cómo utilizar JavaScript para cargar una lista de libros en una aplicación de una sola página. Este proceso implica hacer solicitudes al servidor y actualizar elementos de la interfaz de usuario basados en la respuesta obtenida.
¿Qué librería se utiliza para simplificar el uso de JavaScript?
Para facilitar la manipulación del DOM y mejorar la comunicación con el servidor, utilizamos la librería jQuery. Esta biblioteca permite seleccionar y manipular elementos del DOM de manera eficiente y sencilla.
La inclusión de jQuery permite acceder a un amplio abanico de funciones útiles que hacen que la programación en JavaScript sea más sencilla y limpia.
¿Cómo se maneja el evento de clic del botón?
El primer paso es establecer un manejador de eventos para el botón que se encargará de cargar los libros. Usamos una función anónima dentro del método click de jQuery.
En este fragmento de código, cuando el usuario hace clic en el botón, se muestra un mensaje de "Cargando libros..." y se hace una solicitud AJAX al servidor. Al recibir una respuesta exitosa, el mensaje se oculta, se vacía la tabla existente de libros y se agrega cada nuevo libro obtenido a la tabla.
¿Cómo se actualiza la tabla de libros?
Para cada libro recibido, se define una función agregarFila que agrega una nueva fila a la tabla con los datos de cada libro.
La función agregarFila crea un nuevo elemento de fila con las celdas correspondientes a cada atributo del libro, como título, autor y género, y luego la agrega al cuerpo de la tabla.
¿Qué se debe hacer después de cargar los libros?
Al final del proceso, proporcionamos al usuario la opción de agregar un nuevo libro mediante un formulario visible. Sin embargo, en la demostración actual hay un botón "Guardar" que aún no está funcional, lo que será abordado en una siguiente etapa.
Este tipo de integración no solo crea aplicaciones más dinámicas y útiles para el usuario, sino que también fomenta la creación de aplicaciones web modernas e interactivas que pueden manejar datos de manera eficiente.
Con la base establecida, continuaremos mejorando la aplicación para permitir la funcionalidad de agregar nuevos libros y responder al clic en el botón "Guardar", así que ¡mantente atento a nuevas actualizaciones!
Angular maneja un HttpClient nativo del lenguaje para la solución de solicitudes http
Si no te cargan bien los datos, tranquilo. En la siguiente clase lo solucionan 👍
No fue mi caso. El contenido de la tabla solo muestra undefined.
Es bueno aclarar que para obtener los datos de los libros se inicializa con:
php -Slocalhost:8000 router.php
No con:
php -Slocalhost:8000
Como se vio en la clase anterior.
Y para que el archivo server.php reconozca el index.html, se debe añadir el siguiente código al mismo (al final de la siguiente clase se explica mejor).
// Excepcion para las url principal sea index.htmlif(in_array( $_SERVER["REQUEST_URI"],['/index.html','/',''])){ echo file_get_contents('index.html'); die;}
No entiendo porque en platzi se le da tanto hate al JQuery (que todos sabemos que no se usa) y se esta utilizando en un curso actualizado de API REST.
créeme que de primera pensé lo mismo, mas como dice el profe: por temas de simplicidad está utilizando esta librería; y tomando en consideración que el curso es de API REST y no de javascript(que su implementación con vanilla conllevaría a más líneas de código y podría desviar el tema núcleo del curso…), entonces me parece válido …
fetch es una libreria que ya traen los navegadores para hacer peticiones ajax.
Jquery es un framework de javascript que adiciona muchas mas caracteristicas que hoy en dia js ya hace nativamente.
el solo hecho de cargar todo ese codigo no da ningun beneficio.
la libreria fetch es incluso mas facil de implementar.
Team Platzi.
Muy bueno el curso, pero tienen que actualizarlo.
Estoy de acuerdo en que se puede usar vanilla JS, no se necesita más, actualmente Javascript ya trae muchas herramientas poderosas que lo hacen independiente de usar ciertas librerías, en ciertos casos, sin embargo jQuery es algo que ya es muy viejo, pero no esta de más entender otra tecnología que se usaba mucho, porque en el mundo laboral nos podemos topar con esta herramienta y dominarla nos dará ventaja, por ejemplo WordPress en algunas versiones aun usa jQuery de base
JQuerry es una librería antigua. Lo digo para que nadie se lance a aprender esta librería cuando ya existen muchas que la reemplazaron. No en si porque sean mejores sino porque en el tiempo que se creo JQuerry era muy complicado crear comandos para interactuar con el DOM. Sin embargo el JS que hoy conocemos nos permite hacerlo sin la necesidad de usar JQuerry y de una forma mas sencilla que en aquellos tiempos.
Hoy en día existen muchas otras librerias, tales como React.js, Vue.js, etc.
Muy cierto , Jquery , tuvo su tiempo , en estos momentos la mayoria de cosas que se hacen con Jquery se hacen facilmente como dices , de hecho hay un curso aca en platzi de Jquery a Javascript.
🍦 Vainilla JS
Consumir API con JavaScript vanilla
Puedes consumir APIs en JavaScript sin necesidad de usar JQuery, el cual se encuentra ya prácticamente obsoleto.
Para ello utilizamos la función nativa de fetch.
fetch('localhost:8000/books')// Se usa el .then() para obtener la respuesta// Puedes ver el estatus poniendo por ejemplo: // console.log(response.status).then(response=>{console.log(response.status)// Tenemos que retornar la respuesta con response.json() para solo ver los datos y no toda la respuesta (headers, status, etc)return response.json()})// Volvemos a poner .then() para usar el dato que retornamos anteriormente.then(data=>console.log(data))
Esto también se puede hacer de forma asíncrona usando async y await dentro de una función:
asyncfunctionllamarMiAPI(){const response =awaitfetch('localhost:8000/books');console.log(response.status);const data =await response.json();return data;}llamarMiAPI()
Gracias! Con este cambio sí carga el listado de libros.
Hola! al cargar los libros arroja undefined en todos los registros. No se solucionó agregando el dataType ¿alguna idea? gracias!!
Recuerda agregar el archivo now.json.
Está en los recursos del video 15.
Ya me estaba desesperando porque no vi en qué momento el profesor creó ese archivo.
Buenas tarde envio mis código de los cambio que me toco hacer para que funcionara. Es importante iniciar el servidor con route.php
index.html
<script type="text/javascript">//Se identifica el elemento por el id para que realice una funcion$('#loadBooks').click(function(){//Dentro de la funcion toma el parrafo con el id 'messages' para cargar el texto mientras realiza la consulta$('#messages').first('p').text('Cargando libros....');$('#messages').show();//Se ejecuta la llamada al servidor mediante el metodo Ajax. Recibe un objeto jSon de la configuracion de la conexionconsole.log('hola'); $.ajax({'url':'/books','dataType':'json',// Metodo que recibe la respuesta del servidor (HTTP_ERROR_CODE)'success':function(data){//Desaparece el mensaje$('#messages').hide();//Vacia la tabla$('#booksTable > tbody').empty();//Recorrer el arreglo de los resultados obtenidos y agregar cada uno a la tablafor(b in data){addBook(data[b]);}$('#bookForm').show();}});});// Funcion para agregar cada unos elementos a la fila de la tablafunctionaddBook(book){$('#booksTable tr:last').after('<tr><td>'+ book.titulo+'</td><td>'+ book.id_autor+'</td><td>'+ book.id_genero+'</td></tr>');}</script>
route.php
<?php
$matches=[];// Excepcion para las url principal sea index.htmlif(in_array( $_SERVER["REQUEST_URI"],['/index.html','/',''])){ echo file_get_contents('ruta_aqui_directorio/index.html'); die;}
Yo lo hice asi
Claro y preciso. Gran aporte, agracias.
Esta es otra manera de hacer una llamada asincrona con JQuery.
hola buenos dias, mi pregunta es ¿cómo envio datos a mi base de datos pero colocando la funcion ajax en un archivo javascript , separado del html en el cual tengo un formulario de registro.
Tome el curso solo para ver la comunicación con ajax y lo hacen con jquery... porqueeeee? solo me obliga a tomar otro curso de una librería vieja
En muchos trabajos todavía piden jQuery para hacer mantenimiento a proyectos viejos, no está de más aprender la librería vieja XD
Con jQuery también se puede usar simplemente el método $.get para obtener datos mediante get, pero siempre es mejor usar $.ajax para hacer una petición más completa
código añadido a index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$('#loadBooks').click(function(){$('#messages').first('p').text('Cargando libros...');$('#messages').show(); $.ajax({'url':'http://localhost:8000/books','success':function(data){$('#messages').hide();$('#booksTable > tbody').empty();for( b in data ){addBook( data[b]);}$('#bookForm').show();}});});functionaddBook(book){$('#booksTable tr:last').after('<tr><td>'+ book.titulo+'</td><td>'+ book.id_autor+'</td><td>'+ book.id_genero+'</td></tr>');}</script>
Ejemplo:
$.ajax({url:'https://reqres.in/api/users',success:function(respuesta){console.log(respuesta);},error:function(){console.log("No se ha podido obtener la información");}});
hola tengo este error, he intentado las opciones que hay en los comentarios pero no me han funcionado,
Access to XMLHttpRequest at 'https://localhost:44398/api/Libros'from origin 'null' has been blocked by CORSpolicy:No'Access-Control-Allow-Origin' header is present on the requested resource.
