ChatGPT
从 https://api.namefake.com/english-united-states 获取 json 数据，将其中的 name 填入 <input id="name"> 将 address 填入 <input id="address">，并给出按钮可以刷新数据重新填入
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.
Talk to ChatGPT on Poe
Poe - Fast AI Chat
By Quora
Poe lets you ask questions, get instant answers, and have back-and-forth conversations with AI. Gives access to GPT-4, gpt-3.5-turbo, Claude from Anthropic, and a variety of other bots.