jq_ajax + php实现当前天气查询
Posted eyes++
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq_ajax + php实现当前天气查询相关的知识，希望对你有一定的参考价值。
本案例是调用了聚合api的天气接口，需要的话可以前往聚合api申请密钥。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="test" action="">
<input type="text" id="usercity" name="usercity" placeholder="请输入需要查询的城市">
</form>
<button id="send" onclick="test()">查询今日天气</button>
<!-- 显示结果 -->
<div>
<p id="city"></p>
<p id="temperature"></p>
<p id="humidity"></p>
<p id="info"></p>
<p id="direct"></p>
<p id="power"></p>
<p id="aqi"></p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
function test(){
$.ajax({
// 访问的服务器文件
url: 'weather.php',
// 请求方式
type: 'POST',
// 期待服务器返回的数据格式
dataType: 'json',
// 发送给服务器的数据(serialize()函数可以序列化表单值)
data: $("#test").serialize(),
// 请求成功回调函数
success: function(result){
showDate(result);
},
// 请求失败回调函数
error: function(){
alert("请求失败");
}
})
}
function showDate(result){
$('#city').text('当前城市:' + result[0]);
$('#temperature').text('当前温度:' + result[1]);
$('#humidity').text('当前湿度:' + result[2]);
$('#info').text('当前天气:' + result[3]);
$('#direct').text('当前风向:' + result[4]);
$('#power').text('当前风力:' + result[5]);
$('#aqi').text('当前空气质量:' + result[6]);
}
</script>
</html>
后端代码：
<?php
// 请求的接口URL
$apiUrl = 'http://apis.juhe.cn/simpleWeather/query';
// 请求参数
$city = $_POST['usercity'];
$params = [
'city' => $city,
'key' => '' // 可以前往聚合api申请密钥
];
$paramsString = http_build_query($params);
/*
* 发起网络请求函数
* @param $url 请求的URL
* @param bool $params 请求的参数内容
* @param int $ispost 是否POST请求
* @return bool|string 返回内容
*/
function juheHttpRequest($url, $params = false, $ispost = 0)
{
$httpInfo = array();
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
curl_setopt($ch, CURLOPT_TIMEOUT, 12);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
if ($ispost) {
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_URL, $url);
} else {
if ($params) {
curl_setopt($ch, CURLOPT_URL, $url.'?'.$params);
} else {
curl_setopt($ch, CURLOPT_URL, $url);
}
}
$response = curl_exec($ch);
if ($response === FALSE) {
return false;
}
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$httpInfo = array_merge($httpInfo, curl_getinfo($ch));
curl_close($ch);
return $response;
}
// 发起接口网络请求
$response = juheHttpRequest($apiUrl, $paramsString , 1);
$result = json_decode($response, true);
if ($result) {
$errorCode = $result['error_code'];
if ($errorCode == 0) {
// 获取返回的天气相关信息，具体根据业务实际逻辑调整修改
$data = $result['result'];
// 打印当前实况天气信息
$arr = [
$data["city"],
$data["realtime"]["temperature"],
$data["realtime"]["humidity"],
$data["realtime"]["info"],
$data["realtime"]["direct"],
$data["realtime"]["power"],
$data["realtime"]["aqi"]];
echo json_encode($arr);
} else {
// 请求异常
echo "请求异常:{$errorCode}_{$result["reason"]}".PHP_EOL;
}
} else {
// 可能网络异常等问题，无法正常获得相应内容，业务逻辑可自行修改
echo "请求异常".PHP_EOL;
}
以上是关于jq_ajax + php实现当前天气查询的主要内容，如果未能解决你的问题，请参考以下文章