如何让此按钮在单击时以 json 格式返回 api 请求？答案

【问题标题】：How do I get this button to return the api request in json format on click?如何让此按钮在单击时以 json 格式返回 api 请求？
【发布时间】：2021-11-29 09:18:20
【问题描述】：

我正在尝试获取 id 为“testp”的按钮以返回 json 格式的 api 请求，但它不起作用。这是 HTML 代码链接：https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-built-in-fetch.html

这里是 Javascript 代码链接：https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-built-in-fetch.js

【问题讨论】：

您不能在一个页面上多次使用相同的 id。您的 html 无效。可能还有更多问题，但我不再关注这一点。

标签： javascript html css api

【解决方案1】：

正如@Dov Rine 所提到的，您不能在一个页面上多次使用相同的 id，因此请务必自行修复（我不知道您是否需要它来做其他事情，所以我没有触摸它们）。
但无论如何，这是您问题的解决方案：

/*function getMethod() {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => console.log(json));
}*/
function testp() {
  getData(
    "https://gorest.co.in/public/v1/users"
  ).then((data) => {
    document.getElementById("test").innerHTML = JSON.stringify(data);
  })
}
testp();
//GET
async function getData(url) {
  const response = await fetch(url, {
    method: "GET",
    headers: { "Content-Type": "application/json" },
    mode: "cors",
  });
  return response.json();
}

function getMethod() {
  getData("https://gorest.co.in/public/v1/users").then((data) => {
    console.log(data);
  });
}

//POST
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function postMethod() {
  postData("https://jsonplaceholder.typicode.com/posts", {
    id: 101,
    petId: 5,
    quantity: 0,
    shipDate: "2021-07-23T01:44:32.945Z",
    status: "placed",
    complete: false,
  }).then((data) => {
    console.log(data);
  });
}

//PUT
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "PUT",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function putMethod() {
  postData("https://jsonplaceholder.typicode.com/posts/1", {
    id: 1,
    petId: 5,
    quantity: 0,
    shipDate: "2021-07-23T01:44:32.945Z",
    status: "placed",
    complete: false,
  }).then((data) => {
    console.log(data);
  });
}

//DELETE
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "DELETE",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function deleteMethod() {
  postData("https://jsonplaceholder.typicode.com/posts/1", {}).then((data) => {
    console.log(data);
  });
}

   <body>
    <h1>Built-in fetch js</h1>

    <button id="runScript" onclick="getMethod()">Get Method</button>
    <br /><br />
    <button id="runScript" onclick="postMethod()">Post method</button>
    <br /><br />
    <button id="runScript" onclick="putMethod()">Put method</button>
    <br /><br />
    <button id="runScript" onclick="deleteMethod()">Delete method</button>

    <p id="test"></p>

我所做更改的说明

你有一个不知从何而来的流浪return response.json();，所以我删除了它。你的

const testp = (document.getElementById("test").innerHTML = getData(
 "https://gorest.co.in/public/v1/users"
).then((data) => data));

在innerHTML中只返回了[object Promise]，所以我将其替换为如下函数并调用：

function testp() {
  getData(
    "https://gorest.co.in/public/v1/users"
  ).then((data) => {
    document.getElementById("test").innerHTML = JSON.stringify(data);
  })
}
testp();

你也不能这样做

document.getElementById("test").innerHTML = data;

因为它只会显示[object Object]。正确的方法是这样⬇：

document.getElementById("test").innerHTML = JSON.stringify(data);

如示例所示。
希望这有帮助！

【讨论】：