使用公共 API 从站点中提取 JSON 数据并将其异步显示在页面上
Posted
技术标签:
【中文标题】使用公共 API 从站点中提取 JSON 数据并将其异步显示在页面上【英文标题】：To use a public API to pull JSON data from the site and display it on a page asynchronously 【发布时间】：2020-07-19 03:50:03 【问题描述】：<!DOCTYPE html>
<html>
<head>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<input type="text" placeholder="Enter Your Zip Code" id="zipCode">
<button>Get Weather Condition</button>
<table id="description" >
<tr>
<td>City:</td>
<td id="city"></td>
</tr>
<tr>
<td>Temparature:</td>
<td id="temparature"></td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed"></td>
</tr>
<tr>
<td>Humidity:</td>
<td id="humidity"></td>
</tr>
<tr>
<td>Min Temparature:</td>
<td id="mintemparature"></td>
</tr>
<tr>
<td>Max Temparature:</td>
<td id="maxtemparature"></td>
</tr>
</table>
<script>
function convertTemp(val)
var temp = (((val-273.15)*9)/5)+32;
return temp;
$(document).ready(function()
$("button").click(function()
var zipcode = $("#zipCode").val();
$.ajax(
method: "GET",
url: "http://api.openweathermap.org/data/2.5/weather?zip=" + zipcode
+ ",us&appid=b6f0657aa7b18c98e70c7bee5d36f1df",
dataType: "json"
).done(function(result)
var response = JSON.parse(result);
$('#city').text(response.name);
$('#temparature').text(convertTemp(response.main.temp));
$('#speed').text(response.wind.speed);
$('#humidity').text(response.main.humidity);
$('#mintemparature').text(convertTemp(response.main.temp_min));
$('#maxtemparature').text(convertTemp(response.main.temp_max));
);
);
);
</script>
</body>
</html>我创建了一个天气 APL 网页，但为什么输入邮政编码时它没有显示任何结果？请帮忙！
输入邮政编码并使用该邮政编码来构建将获取该地区当前天气的 URL。然后在同一页面上显示天气。您应该显示： 当前状况（多云、下雨、多云等） 城市名称 温度 风速和风向 湿度 最低温度和最高温度 确保温度以美国华氏单位为单位。
【问题讨论】：
【参考方案1】：需要解决的几个问题：
在您的<script> 标签中，您添加了一个额外的>。您可以将其更改为
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
https而不是http
您不需要执行var response = JSON.parse(result);，因为设置dataType: "json" 已经为您解析了它。因此，尝试在对象上调用 JSON.parse 会引发错误。而是直接使用result.name 等。
【讨论】：
以上是关于使用公共 API 从站点中提取 JSON 数据并将其异步显示在页面上的主要内容，如果未能解决你的问题，请参考以下文章
如何从 PHP 中获取远程 JSON 或 XML API 数据并将返回对象分配为 PHP 变量？
将 csv 上传到内存中并将 json 发送到 api 的 Django 页面
GatsbyImage 在生产站点中不起作用（从 WP CMS 中提取数据）
从 API 中提取数据并将记录存储在 Pandas 数据框中