logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

AJAX - jQuery

A biblioteca JQuery possui um método para fazer pedidos ajax de forma mais simples. Basta chamar o método e passar um objeto com algumas informações sobre o pedido.

Vamos repetir a requisição da última aula, mas desta vez usando jQuery.

                    

    $.ajax({
        url : "https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22",
        type: "GET",
        dataType: "json",
        success: function(data){
            console.log(data);
        },
        error: function(){
            console.log("Erro na requisição");
        }  
    });

                    
                

Note que, ao passar o dataType como JSON, a resposta já vem como um objeto, não sendo necessário fazer o parse.

Além disso, não é necessário testar o status da mensagem, pois o método ajax possui as propriedades success e error, que servem para passar funções para o caso de sucesso ou erro na requisição.

Esta propriedades são funções callback, que são executadas depois que a resposta é recebida.

Pode-se também definir as funções para success e error com métodos em cadeia .done e .fail.

                

    $.ajax({
        url : "https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22",
        type: "GET",
        dataType: "json"
    }).done(function(data){
        console.log(data);
    }).fail(function(){
        console.log("Erro na requisição");
    });

                
            
Desafio: Faça o pedido ajax ao open weather map e solte abaixo a temperatura atual, a máxima e a mínima de Londres:

Temperatura atual:

Temperatura máxima:

Temperatura mínima:

Índice de Aulas