JavaScript là một ngôn ngữ lập trình rất mạnh mẽ được sử dụng liên tục với HTML trong lập trình web. Một trong nhiều điều mà bạn có thể làm với JavaScript là bạn có thể lấy kết quả API từ các điểm cuối tương ứng của họ. Trong hướng dẫn này, bạn sẽ học cách trích xuất dữ liệu Rick và Morty từ API và hiển thị nó trên trang HTML.Fetch API Results from their respective endpoints. In this walkthrough, you are going to learn how to extract Rick and Morty data from an API and display it on an HTML page. Để bắt đầu Đầu tiên, chúng tôi sẽ muốn tạo một tệp dự án nhanh bao gồm tệp index.js và tệp index.html. index.html Bạn sẽ muốn có mã HTML Boilerplate này trong tệp index.html của bạn: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Rick and Morty Data</title> <script src=’index.js’ defer></script> </head> <body> <div id=’rick-and-morty-characters’></div> </body></html> Trong thiết lập bảng hơi HTML này, chúng tôi bao gồm các phần tử thông thường cộng với một phần tử DIV (#Rick-and-Morty-Staracters), sẽ là nơi dữ liệu Rick và Morty của chúng tôi sẽ được hiển thị. index.js Tiếp theo, chúng tôi sẽ tạo một tệp index.js để trống ngay bây giờ. Đọc tài liệu API của Rick và Morty Chúng tôi sẽ sử dụng ‘Rick và Morty API. Trong tài liệu, chúng tôi sẽ muốn đọc phần ký tự và sẽ đặc biệt muốn có được tất cả các ký tự. Trong bài tập của chúng tôi, chúng tôi sẽ kéo một số nhân vật Rick và Morty từ API bằng điểm cuối sau: ‘https://rickandmortyapi.com/api/character/. Trong tài liệu API, bạn sẽ thấy rằng phản hồi JSON GET ALL ELL { "info": { "count": 394, "pages": 20, "next": "https://rickandmortyapi.com/api/character/?page=2", "prev": "" }, "results": [ { "id": 1, "name": "Rick Sanchez", "status": "Alive", "species": "Human", "type": "", "gender": "Male", "origin": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/1" }, "location": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/20" }, "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg", "episode": [ "https://rickandmortyapi.com/api/episode/1", "https://rickandmortyapi.com/api/episode/2", // ... ], "url": "https://rickandmortyapi.com/api/character/1", "created": "2017-11-04T18:48:46.250Z" }, // ... ]} Trong bài tập của chúng tôi, chúng tôi đã giành được lo lắng về việc phân trang, nhưng thay vào đó sẽ lấy trang kết quả đầu tiên và sẽ hiển thị nó vào trang HTML. JavaScript tìm nạp JavaScript Fetch là cách gửi các yêu cầu mạng của JavaScript. Một mô tả sơ bộ về cú pháp là: 'Let Promise = fetch (url, [Tùy chọn]);', trong đó URL là URL nhận được yêu cầu và tùy chọn là các tham số tùy chọn có thể được thêm vào (tiêu đề, cơ thể/tải trọng, vv vv). Tìm nạp có thể hơi khó hiểu ở chỗ nó trả về một lời hứa, trong đó chứa phản hồi; Do đó, chúng tôi sẽ cần sử dụng ‘.Hen () để xử lý lời hứa. Bắt đầu mã Bây giờ chúng tôi đã thiết lập mọi thứ, hãy để bắt đầu với phần thú vị, mã! Chúng tôi sẽ chuyển sang tệp index.js của mình và sẽ nhập mã sau trong: fetch(‘https://rickandmortyapi.com/api/character/’) .then(response => response.json()) .then(characters => showCharacters(characters.results)); Đây là yêu cầu tìm nạp cơ bản của chúng tôi, gửi yêu cầu nhận được API Rick và Morty và sau đó nhận phản hồi JSON và chạy chức năng ShowCharacters của chúng tôi (chúng tôi sẽ tạo điều này tiếp theo, sẽ hiển thị dữ liệu trên trang HTML) với kết quả của JSON Refwer 'thuộc tính như một đầu vào. Bây giờ, hãy tìm ra cách để nhận được yêu cầu tìm nạp để hiển thị tên nhân vật Rick và Morty trong Div của Rick và Morty Starters trên trang HTML của chúng tôi. showCharacters = characters => { const charactersDiv = document.querySelector(‘#rick-and-morty- characters’); characters.forEach(character => { const characterElement = document.createElement(‘p’); characterElement.innerText = `Character Name: ${character.name}`; charactersDiv.append(characterElement); });} Mở và kiểm tra trang HTML Bây giờ chúng tôi sẽ mở một máy chủ và kiểm tra trang HTML của chúng tôi để đảm bảo rằng nó hiển thị dữ liệu các ký tự Rick và Morty trong DIV. Tôi sẽ làm điều này bằng cách sử dụng lite-server; Do đó, tôi sẽ mở một thiết bị đầu cuối và điều hướng đến thư mục trong đó tệp index.html của tôi và tôi sẽ chạy lệnh sau: ‘lite-server. Sau đó tôi sẽ được cung cấp một URL localhost nơi trang HTML của tôi được hiển thị. Chúng tôi thành công! Như bạn có thể thấy trang HTML đang hiển thị trang đầu tiên của dữ liệu từ Rick và Morty có được tất cả các điểm cuối ký tự. Sự kết luận Như bạn đã học, Fetch rất mạnh mẽ và rất dễ sử dụng cùng với HTML. Bạn có thể thiết lập một trang HTML được gieo bằng dữ liệu từ API. Mã hóa hạnh phúc! Làm thế nào để bạn nhận được phản hồi tìm nạp trong HTML?Bạn có thể sử dụng phương thức văn bản () để nhận phản hồi dưới dạng chuỗi HTML. Phương thức văn bản () trả về phần thân phản hồi dưới dạng chuỗi. Đọc bài viết này để tìm hiểu thêm về các định dạng phản hồi API tìm nạp.use the text() method to get the response as an HTML string. The text() method returns the response body as a string. Read this article to learn more about Fetch API response formats.
Làm thế nào tìm nạp dữ liệu từ API sử dụng Fetch?API tìm nạp cho phép bạn yêu cầu không đồng bộ cho tài nguyên.Sử dụng phương thức Fetch () để trả về một lời hứa giải quyết thành một đối tượng phản hồi.Để có được dữ liệu thực tế, bạn gọi một trong các phương thức của đối tượng phản hồi, ví dụ: văn bản () hoặc json ().Các phương pháp này giải quyết vào dữ liệu thực tế.Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.
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.
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 .. |
