从 https://api.namefake.com/english-united-states 获取 json 数据，将其中的 name 填入 <input id="name"> 将 address 填入 <input id="address">，并给出按钮可以刷新数据重新填入

Shared conversation

ChatGPT ·

ChatGPT

Poe

以下是使用 JavaScript 和 Fetch API 获取数据并填充到 HTML 元素中的示例代码：

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fill Form with Fake Data</title>
  </head>
  <body>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br><br>
    <button id="refresh">Refresh Data</button>

    <script>
      const nameInput = document.getElementById("name");
      const addressInput = document.getElementById("address");
      const refreshButton = document.getElementById("refresh");

      function fillFormWithData(data) {
        nameInput.value = data.name;
        addressInput.value = data.address;
      }

      function refreshData() {
        fetch('https://api.namefake.com/english-united-states')
          .then(response => response.json())
          .then(data => fillFormWithData(data))
          .catch(error => console.error(error));
      }

      refreshButton.addEventListener('click', refreshData);

      // fill the form with data on page load
      refreshData();
    </script>
  </body>
</html>

在这个例子中，我们首先定义了三个变量 nameInput、addressInput 和 refreshButton 来分别获取 HTML 中的输入框和按钮元素。然后，我们定义了两个函数 fillFormWithData 和 refreshData。

fillFormWithData 函数将获取到的数据填充到输入框中，而 refreshData 函数使用 Fetch API 发送 GET 请求到指定的 API 地址获取数据，然后调用 fillFormWithData 函数将数据填充到输入框中。最后，我们使用 addEventListener 方法将 refreshData 函数绑定到按钮的点击事件上，以便在用户点击按钮时刷新数据。同时，在页面加载时也会自动调用 refreshData 函数，以填充初始数据。

请注意，由于我们使用了外部 API 获取数据，因此需要在浏览器中启用 CORS。如果您在本地测试此代码，可以在 Chrome 浏览器中安装 Allow CORS: Access-Control-Allow-Origin 扩展程序来解决此问题。

This conversation may have been edited by the sharer.