Exibir código-fonte para Javascript: consumindo serviços web com JavaScript e JQuery

Afluentes: [[Consumindo Serviços Web com JavaScript]]

= Consumindo Serviços Web com JavaScript e JQuery =

Lembrando que o JavaScript é uma linguagem multifacetada, então podemos fazer a mesma coisa de várias formas diferentes, com bibliotecas diferentes, etc. Assim, vamos ver como consumir serviços web usando javascript usando uma biblioteca chamada JQuery. Também adicionei o Bootstrap pra termos um visual mais bonito.

== index.html ==

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <!-- Metatag da lingua-->
        <meta charset="utf-8">
        <!-- Metatag para página responsiva -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <!-- Bootstrap CSS -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
            crossorigin="anonymous"
        >
        <!-- Bootstrap Bundle with Popper JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
        <!-- Fontawesome -->
        <script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>
        <!-- using jquery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Nosso script -->
        <script src="tvmaze.js"></script>
    </head>
    <body>
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Consumindo serviços em Javascript</h5>
            </div>
            <div class="card-body">
                <div class="input-group">
                    <input
                        id="search"
                        type="search"
                        class="form-control rounded"
                        placeholder="Search"
                        aria-label="Search"
                        aria-describedby="search-addon"
                    >
                    <button type="button" class="btn btn-outline-primary" onclick="getMovies()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Capa</th>
                            <th>Nome</th>
                            <th>URL</th>
                        </tr>
                    </thead>
                    <tbody id="movies"></tbody>
                </table>
            </div>
        </div>
    </body>
</html>
</syntaxhighlight>

== tvmaze.js ==

<syntaxhighlight lang=javascript>
function getMovies() {
    text = encodeURI($("#search").val());
    console.log(text);
    $("#movies").empty();
    $.ajax({
        url: "https://api.tvmaze.com/search/shows?q=" + text,
        type: "GET",
        dataType: "json",
        success: function (data) {
            $.each(data, function (index, value) {
                var name = value.show.name;
                var url = value.show.url;
                var img = value.show.image.medium;
                addTableRow(img, name, url);
            });
        }
    });
}

function addTableRow(img, name, url) {
    // Cria uma linha pra tabela
    var row = document.createElement("tr");

    // Cria a célula para a coluna da imagem
    var td_img = document.createElement("td");
    var my_img = document.createElement("img");
    my_img.src = img;
    my_img.width = 50;
    td_img.append(my_img);

    // Cria a célula para a coluna Nome
    var td_name = document.createElement("td");
    td_name.innerHTML = name;

    // Cria a célula paraa  coluna "URL"
    var td_url = document.createElement("td");
    var td_url_a = document.createElement("a")
    td_url_a.innerHTML = url;
    td_url_a.href = url;
    td_url.append(td_url_a);

    // Adiciona as células na linha
    row.append(td_img);
    row.append(td_name);
    row.append(td_url);

    // Adiciona a linha na tabela no HTML
    $("#movies").append(row);
}

// forma alternativa da função acima
function addTableRowAlternative(img, name, url) {
    $("#movies").append(
        `<tr>
            <td><img src="${img}" width=50></td>
            <td>${name}</td>
            <td><a href="${url}">${url}</a></td>
        </tr>`
    );
}
</syntaxhighlight>