Cursos Empresas Blog Live Conf Eventos Precios

0:008:00

Recursos

Resumen

¿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.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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.

$('#botonCargarLibros').click(function() {
    $('p.mensaje').text('Cargando libros...');
    
    $.ajax({
        url: 'http://localhost:8080/libros.json',
        success: function(datos) {
            $('p.mensaje').hide();
            const cuerpoTabla = $('#cuerpoTablaLibros').empty();
            
            datos.forEach(libro => {
                agregarFila(libro, cuerpoTabla);
            });

            $('#formularioAgregarLibro').show();
        }
    });
});

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.

function agregarFila(libro, cuerpoTabla) {
    const fila = $('<tr></tr>');
    fila.append($('<td></td>').text(libro.titulo));
    fila.append($('<td></td>').text(libro.autor));
    fila.append($('<td></td>').text(libro.genero));
    
    cuerpoTabla.append(fila);
}

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!

JavaScript para Interacción con el DOM y AJAX

Curso de API REST con PHP

Clase 16 / 19

Ver clases

JavaScript para Interacción con el DOM y AJAX

Curso de API REST con PHP

Clase 16 de 19

Clase 16 / 19

JavaScript para Interacción con el DOM y AJAX

Curso de API REST con PHP

Clase 16 / 19

Ver clases

Comentarios (31)31 comentarios

Luis Fernando Zarazua Aguilar

Hace 7 años

Si el get no lo hace correctamente el navegador puede ser un error de cors https://www.w3.org/wiki/CORS_Enabled#What_is_CORS_about.3F. Agregue estas líneas en el código del servidor.

header('Content-Type: application/json');
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
    header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

Mariano Logarzo

👌🏻

Jorge Cruz Perez

Hace 6 años

Gracias por el tip, funciono perfecto :)

Manuel Gil

En la actualidad podemos usar API Fetch o realizar la solicitud con el Objeto XMLHttpRequest de JavaScript sin necesidad de importar una librería.

En Vue.js existía una iniciativa llamada vue request, pero decidieron hacer uso de axios ya que tenía una mejor implementación

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
  const el = document.querySelector('#loadBooks');
  el.addEventListener("click", function(){
    const url = 'http://localhost:8000/books';
    axios.get(url)
      .then(function (data) {
        // TODO addBook()
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  });
</script>

Angular maneja un HttpClient nativo del lenguaje para la solución de solicitudes http

Freddy Córdova Arana

Si no te cargan bien los datos, tranquilo. En la siguiente clase lo solucionan 👍

Angel Gonçalves

No fue mi caso. El contenido de la tabla solo muestra undefined.

Leonardo Rios Pineda

Hace 5 años

Es bueno aclarar que para obtener los datos de los libros se inicializa con:

php -S localhost:8000 router.php

No con:

php -S localhost: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.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'index.html' );
    die;
}

Misael Pereira Diaz

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.

Emerson Cedeño

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 …

William Rodriguez

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.

Usuario anónimo

User

Team Platzi. Muy bueno el curso, pero tienen que actualizarlo.

Paul Cortes

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

Jeronimo Torres

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.

Diego Andres Cabrera Rojas

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.

Royer Guerrero Pinilla

🍦 Vainilla JS

Lucas Alvarez

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:

async function llamarMiAPI() {
  const response = await fetch('localhost:8000/books');

  console.log(response.status);

  const data = await response.json();

  return data;
}

llamarMiAPI()

Omar Villada

Un video cortico de fredy explicando que es AJAX https://www.youtube.com/watch?v=_ybgWmSCAu8

platzerito02112019 platzerito02112019

El codigo de router.php :

<?php

$matches = $_GET = [];

// Excepcion para las  url principal sea index.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'ruta de\index.html' );
    die;
}

if (preg_match('/\/([^\/]+)\/([^\/]+)/', $_SERVER["REQUEST_URI"], $matches)) {
    $_GET['resource_type'] = $matches[1];
    $_GET['resource_id'] = $matches[2];
    
    require 'server.php';
} elseif ( preg_match('/\/([^\/]+)\/?/', $_SERVER["REQUEST_URI"], $matches) ) {
    $_GET['resource_type'] = $matches[1];
    
    require 'server.php';
} else {
    error_log('No matches');
    http_response_code( 404 );
}

Leocadio Galagarza

Gracias! Con este cambio sí carga el listado de libros.

Patricio López Cabal

Hola! al cargar los libros arroja undefined en todos los registros. No se solucionó agregando el dataType ¿alguna idea? gracias!!

Andrea Lozano Cataño

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.

Juan Felipe Lara Martinez

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 conexion
            console.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 tabla
                        for (b in data) {
                            addBook(data[b]);
                        }
                        $('#bookForm').show();
                    }
                }
            );
        });
        // Funcion para agregar cada unos elementos a la fila de la tabla
        function addBook(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.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'ruta_aqui_directorio/index.html' );
    die;
}

Christian Fernandez

Yo lo hice asi

Rodrigo Ramos Xochiteotzin

Claro y preciso. Gran aporte, agracias.

Miguel Angel Guante Suero

Esta es otra manera de hacer una llamada asincrona con JQuery.

            $.get('http://localhost:8000/books/')
            .done(response => {
                ...<Codigo>...
            });

Diego L

Hace 4 años

Si tu tabla se llena de “undefined”, haz esto:

Inicializa el servidor con php -S localhost:8000 router.php . En el video pasado, el profesor lo inicializó sin "router.php" diciendo que no era necesario, pero en mi caso si me da un problema y eso me ayudó a resolverlo.
Al final de la siguiente clase, el profesor agrega un pedazo de código al archivo router.php para que localhost:8000 cargue tu archivo index.html

Rodolfo Rohatan Bassil

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.

Eduardo

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

Karenn Yeraldin Hernández Duarte

En muchos trabajos todavía piden jQuery para hacer mantenimiento a proyectos viejos, no está de más aprender la librería vieja XD

Carlos Eduardo Gomez García

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

Camilo Ramirez Castillo

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();
            }
        } );
    });

    function addBook( book )
    {
        $('#booksTable tr:last').after('<tr><td>' + book.titulo + '</td><td>' + book.id_autor + '</td><td>' + book.id_genero + '</td></tr>');
    }
    </script>

Christian David Sánchez

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");
    }
});

Recursos

Resumen

JavaScript para Interacción con el DOM y AJAX

JavaScript para Interacción con el DOM y AJAX

JavaScript para Interacción con el DOM y AJAX

Progreso del curso

Comprender los objetivos y pre-requisitos del curso

Conocer los conceptos principales de REST

Aprender a consumir servicios REST

Aprender a producir servicios REST

Conocer diferentes modos de restringir el acceso a las API Rest

Aprender a tratar errores en la comunicación vía REST

Aprender a utilizar una API Rest para la comunicación FrontEnd/BackEnd

Conocer buenas prácticas del diseño de APIs REST

JavaScript para Interacción con el DOM y AJAX

JavaScript para Interacción con el DOM y AJAX

Recursos

Resumen

¿Cómo integrar JavaScript en una aplicación web para cargar libros dinámicamente?

¿Qué librería se utiliza para simplificar el uso de JavaScript?

¿Cómo se maneja el evento de clic del botón?

¿Cómo se actualiza la tabla de libros?

¿Qué se debe hacer después de cargar los libros?

Comentarios

Recursos

Resumen

¿Cómo integrar JavaScript en una aplicación web para cargar libros dinámicamente?

¿Qué librería se utiliza para simplificar el uso de JavaScript?

¿Cómo se maneja el evento de clic del botón?

¿Cómo se actualiza la tabla de libros?

¿Qué se debe hacer después de cargar los libros?

Comentarios

El codigo de router.php :