Javascript: consumindo serviços web com JavaScript e JQuery
De Aulas
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
<!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>
tvmaze.js
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>`
);
}
