Trong hướng dẫn này, bạn sẽ học cách tìm nạp dữ liệu từ API từ xa và xuất dữ liệu đó vào trang HTML. Học cách làm việc với API, là một kỹ năng tiện dụng cần có vì nó cho phép bạn xây dựng các ứng dụng từ dữ liệu mà những người khác đã tạo. API mà chúng tôi sẽ sử dụng là thecocktaildb một API miễn phí với hơn 600 công thức nấu ăn đồ uống mà không yêu cầu một tài khoản để bắt đầu. Nếu các loại cocktail không phải là thứ của bạn, thì đó cũng là thesportsdb, theaudiodb và themealdb, tất cả đều miễn phí và có sẵn công khai. Chúng tôi sẽ xây dựng một trang để lấy một loại cocktail ngẫu nhiên như sau: Hãy bắt đầu bằng cách tạo một tệp HTML với đánh dấu sau: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Random Cocktail Recipe</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="cocktail"></div>
<div id="overlay"></div>
<script src="script.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
Tiếp theo trong tệp script.js, chúng tôi sẽ thực hiện yêu cầu của mình bằng API tìm nạp. Hiện đang được hỗ trợ trong tất cả các trình duyệt không bao gồm IE và Opera Mini, API Fetch cung cấp một giao diện đơn giản để tìm nạp tài nguyên HTTP. fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
Nếu yêu cầu thành công, bạn sẽ có thể xem dữ liệu trong bảng điều khiển: Bây giờ chúng ta có thể chuyển dữ liệu này đến một chức năng sẽ đưa nó vào HTML. Tạo hàm displayCocktail() trong script.js. Sau đó, chúng tôi sẽ khai báo các biến cho fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
0 và fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
1 được sử dụng để xuất dữ liệu:function displayCocktail(data) {
const cocktail = data.drinks[0];
const cocktailDiv = document.getElementById("cocktail");
...
}
Code language: JavaScript (javascript)
Bây giờ, hãy để xuất hiện dữ liệu vào HTML của chúng tôi bắt đầu với tên cocktail: ...
const cocktailName = cocktail.strDrink;
const heading = document.createElement("h2");
heading.innerHTML = cocktailName;
cocktailDiv.appendChild(heading);
...
Code language: JavaScript (javascript)
Tiếp theo, hãy để có được hình ảnh và cũng thêm nó vào cocktail fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
1. Chúng tôi cũng sẽ sử dụng hình ảnh này làm nền cho fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
3: ...
const cocktailImg = document.createElement("img");
cocktailImg.src = cocktail.strDrinkThumb;
cocktailDiv.appendChild(cocktailImg);
document.body.style.backgroundImage = "url('" + cocktail.strDrinkThumb + "')";
...
Code language: JavaScript (javascript)
Các thành phần khó sản xuất hơn vì chúng không được lưu trữ trong một mảng mà chúng ta có thể dễ dàng vượt qua. Để khắc phục điều này, chúng tôi sẽ tạo ra một đối tượng và chỉ thêm các thành phần mà don lồng có giá trị fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
4:Sau đó, chúng ta có thể lặp qua các thành phần này và đưa chúng vào danh sách các thành phần chưa được đặt hàng: ...
const cocktailIngredients = document.createElement("ul");
cocktailDiv.appendChild(cocktailIngredients);
const getIngredients = Object.keys(cocktail)
.filter(function (ingredient) {
return ingredient.indexOf("strIngredient") == 0;
})
.reduce(function (ingredients, ingredient) {
if (cocktail[ingredient] != null) {
ingredients[ingredient] = cocktail[ingredient];
}
return ingredients;
}, {});
for (let key in getIngredients) {
let value = getIngredients[key];
listItem = document.createElement("li");
listItem.innerHTML = value;
cocktailIngredients.appendChild(listItem);
}
...
Code language: JavaScript (javascript)
Điều đó kết thúc JavaScript. Tất cả những gì còn lại để làm là thêm các CSS sau vào tệp fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then(data => {
console.log(data);
displayCocktail(data)
})
.catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)
5:html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
font-family: sans-serif;
}
#overlay {
background: rgba(147, 135, 242, 0.9);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#cocktail {
max-width: 350px;
text-align: center;
padding: 30px 30px 12px 30px;
color: #fff;
background-color: #7766d7;
border: 4px solid #9387f2;
border-radius: 5px;
}
#cocktail h2 {
margin: 0 0 15px 0;
text-transform: uppercase;
}
#cocktail img {
max-width: 300px;
border: 6px solid #fff;
border-radius: 150px;
}
#cocktail ul {
list-style: none;
margin: 0;
padding: 0;
}
#cocktail li {
padding: 15px 0;
font-size: 18px;
}
#cocktail li:not(:last-of-type) {
border-bottom: 1px solid #fff;
}
Code language: CSS (css)
Trong hướng dẫn này, bạn đã học cách xây dựng một trang web hiển thị một công thức cocktail ngẫu nhiên từ API. Nếu bạn muốn tìm hiểu thêm về API tìm nạp, hãy xem các tài liệu web MDN.
Làm thế nào để bạn hiển thị dữ liệu trong HTML?
JavaScript có thể "hiển thị" dữ liệu theo những cách khác nhau:.. Viết vào một phần tử HTML, sử dụng InternalHTML .. Viết vào đầu ra HTML bằng document.write () .. Viết vào một hộp cảnh báo, sử dụng window.alert () .. Viết vào bảng điều khiển trình duyệt, sử dụng Console.log () .. Làm thế nào để bạn gọi một API trong HTML?
Gọi API Web với JavaScript.. Định cấu hình ứng dụng để phục vụ các tệp tĩnh và bật ánh xạ tệp mặc định..... Tạo một thư mục wwwroot trong root dự án .. Tạo thư mục CSS bên trong thư mục wwwroot .. Tạo thư mục JS bên trong thư mục wwwroot .. Thêm tệp HTML có tên Index.html vào thư mục wwwroot .. Làm thế nào để bạn hiển thị phản hồi trong HTML?
Sử dụng các hướng dẫn sau để tạo đối tượng phản hồi HTML.Chuyển đến Cấu hình> Đối tượng> Phản hồi HTML. Trong trường Tên, nhập tên phù hợp cho đối tượng phản hồi HTML. Trong hộp văn bản phản hồi HTML, nhập mã HTML cho phản hồi.Go to Configuration > Objects > HTML Response. In the Name field, type a suitable name for the HTML Response object. In the HTML Response text box, type the HTML code for the response.
HTML có thể sử dụng API không?
API HTML thường bao gồm một số mẫu thuộc tính và một số mẫu có thể được sử dụng trên HTML hiện có.Với các thành phần web, ngay cả tên phần tử tùy chỉnh là trò chơi và với Shadow Dom, chúng thậm chí có thể có toàn bộ cấu trúc bên trong được ẩn khỏi phần còn lại của JavaScript hoặc CSS của trang.. With Web Components, even custom element names are game, and with the Shadow DOM, those can even have an entire internal structure that is hidden from the rest of the page's JavaScript or CSS. | 
