jq_ajax + php实现当前天气查询

最新推荐文章于 2021-08-05 23:19:29 发布

耶瞳

最新推荐文章于 2021-08-05 23:19:29 发布

阅读量238

点赞数 5

分类专栏： PHP 文章标签： php ajax jquery

本文链接：https://blog.csdn.net/tongkongyu/article/details/119324453

版权

PHP 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本案例是调用了聚合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;
}

在这里插入图片描述
更多内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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,
复制链接

扫一扫

专栏目录