AJAX天气预报查询
以下是一个使用JavaScript和AJAX技术实现的简单天气预报查询器的示例代码。此代码假设你已经有了一个API来提供天气数据，并且该API支持CORS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Weather Query</title>
<script>
function getWeather(city) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("weather").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "https://your-weather-api.com/weather?city=" + city, true);
xhr.send();
}
</script>
</head>
<body>
<input type="text" id="city" placeholder="Enter city name">
<button onclick="getWeather(document.getElementById('city').value)">Get Weather</button>
<div id="weather"></div>
</body>
</html>在这段代码中，我们定义了一个getWeather函数，它创建一个XMLHttpRequest对象来发送一个GET请求到你的天气API。请求成功返回后，天气信息会被插入到页面上ID为weather的元素中。
注意：
- 请将
your-weather-api.com替换为你的实际天气API的URL。 - 你的API需要能处理来自前端应用的跨源请求(CORS)。
- 请确保你的API能接受通过URL传递的城市名称参数，并且响应格式适合这个简单的示例。
评论已关闭