Bot image for ChatGPT

Shared conversation

ChatGPT ·

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

以下是使用 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>

在这个例子中,我们首先定义了三个变量 nameInputaddressInputrefreshButton 来分别获取 HTML 中的输入框和按钮元素。然后,我们定义了两个函数 fillFormWithDatarefreshData

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.

Bot image for ChatGPT
Talk to ChatGPT on Poe