如何发送 POST 请求以从 Url 接收数据？ [关闭]

Question

我需要使用纯 javascript 向 Url 发送 POST 获取请求。我需要在我的代码中添加一个对象，如下所示：var data = {task: ”getall"} 但我不知道在哪里或如何包含它或如何开始。我对 Js 还是很陌生，我想在这项任务上获得一些帮助。

这是我的表格 html 代码：

<div>
      <input id="postall" type="button" value="POST Users" />
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Street</th>
            <th>House Number</th>
          </tr>
        </thead>
        <tbody id="userTablePost"></tbody>
      </table>

这是我用于显示数据的 js 代码：

function renderUsers(users) {
    const tbody = document.getElementById("userTablePost");
    users.forEach(user => {
        let row = tbody.insertRow();
        let cell = row.insertCell();
        cell.textContent = user.id;
        cell = row.insertCell();
        cell.textContent = user.name;
        cell = row.insertCell();
        cell.textContent = user.street;
        cell = row.insertCell();
        cell.textContent = user.house_number;
    });
}

理论上，我应该收到可以在开发者工具网络选项中看到的数据，然后我应该在表格中的 Html 页面上显示该数据。

Answer 1

您需要了解如何创建称为“AJAX 请求”的东西。第一个谷歌教程转到这个链接：https://www.w3schools.com/xml/ajax_intro.asp 这是不错的介绍，但我想你需要阅读更多。

基本上，您需要阅读的关键字：XMLHttpRequest 和 AJAX 以了解这个概念。然后下一步，就是要了解名为“Fetch API”的新 API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

如果您对 JS 很陌生，这可能是您第一次使用称为“异步 API”的东西。这个想法是您不要“一次性”“调用函数”和“得到结果”。你要做的是：

1. 您发出一个请求来做某事（从服务器获取数据） - 您通过创建 XMLHttpRequest() 对象来完成它（阅读教程）。
2. 您告诉 REQUEST 对象“嘿，完成后，调用我的函数 gotData()”
3. 然后您的代码完成或执行其他操作，例如显示进度指示器或“请稍候”。
4. 一段时间后，当浏览器 GET/POST/执行其他操作并为您提取数据时，它会调用您的“gotData()”函数。

...如果一开始看起来很难 - 不要放弃，它确实是一个非常重要的编程模式，你会在以后看到越来越多的东西。

希望有帮助！

Answer 2

试试这样的：

//Promise way
const postData = {task: "getall"};

fetch('https://api.github.com/gists', {
    method: 'post',
    body: JSON.stringify(postData)
}).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log('Response:', data);
});


//Async await
async function fetchData() {
  const response = await fetch('https://api.github.com/gists', {
      method: 'post',
      body: JSON.stringify(postData)
  });

  const json = await response.json();

  console.log(json)
}

fetchData();