Ajax 简明教程
Fetch API - Send GET Requests
Fetch API 提供了一个界面来异步管理与 Web 服务器之间的请求和响应。它提供一个 fetch() 方法来获取资源或将请求异步发送至服务器，而无需刷新网页。使用 fetch() 方法，我们可以执行多种请求，如 POST、GET、PUT 和 DELETE。在本文中，我们将学习如何使用 Fetch API 发送 GET 请求。
Send GET Request
GET 请求是一个 HTTP 请求，用于从给定资源或 Web 服务器检索数据。在 Fetch API 中，我们可以通过在 fetch() 函数中指定方法类型或不指定任何 fetch() 函数方法类型来使用 GET 请求。
Syntax
fetch(URL, {method: "GET"})
.then(info =>{
// Code
})
.catch(error =>{
// catch error
});在此处，我们在 fetch() 函数中指定方法类型为 GET 请求。
或
fetch(URL)
.then(info =>{
// Code
})
.catch(error =>{
// catch error
});在此处，我们没有在 fetch() 函数中指定任何方法类型，因为 fetch() 函数默认使用 GET 请求。
Example
在以下程序中，我们将从给定 URL 中检索 id 和标题，并将其显示在表格中。因此，为此，我们使用 URL 定义一个 fetch() 函数，从该 URL 中检索数据并执行 GET 请求。此函数将从给定 URL 检索数据，然后使用 response.json() 函数将数据转换为 JSON 格式。之后，我们将在表中显示检索到的数据，即 id 和标题。
<!DOCTYPE html>
<html>
<body>
<script>
// GET request using fetch()function
fetch("https://jsonplaceholder.typicode.com/todos", {
// Method Type
method: "GET"})
// Converting received data to JSON
.then(response => response.json())
.then(myData => {
// Create a variable to store data
let item = `<tr><th>Id</th><th>Title</th></tr>`;
// Iterate through each entry and add them to the table
myData.forEach(users => {
item += `<tr>
<td>${users.id} </td>
<td>${users.title}</td>
</tr>`;
});
// Display output
document.getElementById("manager").innerHTML = item;
});
</script>
<h2>Display Data</h2>
<div>
<!-- Displaying retrevie data-->
<table id = "manager"></table>
</div>
</body>
</html>