No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Get via Ajax

16/19
Recursos

Aportes 25

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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](https://github.com/axios/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

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

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.

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.

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

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

<h1>El codigo de router.php :</h1>
<?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 );
}

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

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

Yo lo hice asi

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

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

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

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

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

Si tu tabla se llena de 鈥渦ndefined鈥, haz esto:

  1. Inicializa el servidor con php -S localhost:8000 router.php . En el video pasado, el profesor lo inicializ贸 sin 鈥渞outer.php鈥 diciendo que no era necesario, pero en mi caso si me da un problema y eso me ayud贸 a resolverlo.
  2. 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

Toda la tabla al momento de dar cargar libros, me aparece como undefined鈥 Ayuda!

Hola estoy intentando cargar los libros por medio de un input text y que a pulsar el boton cargar libros los busque en el localhost y solo me traiga los libros que coincidan con la palabra que este en el input pero no he podido dar on el caso, alguien sabria como podria hacerlo y que metodos deberia emplear correctamente.

Me parece muy buena explicaci贸n, consumir la API con AJAX

No me funciona, se me queda en cargando鈥

excelente鈥