码迷,mamicode.com
首页 > Web开发 > 详细

PHP请求天气预报接口,并且将最高温最低温展示到折线图

时间:2019-03-19 10:23:45      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:实例化   php   https   初始化   func   set   tput   result   PHP代码   

备注:折线图使用的是       https://www.hcharts.cn/docs/start-helloworld

 

php代码:

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;

class Exam extends Controller{
    //页面展示
    public function index(){
        return view();
    }

    //请求天气预报
    public function weather_do(){
        $city = input(‘get.city‘);
        $redis = new \Redis();//实例化redis
        $redis->pconnect(‘127.0.0.1‘,‘6379‘);//连接redis
        $data = $redis->get(‘weather_‘.$city);//获取天气的值
        if($data){
            //有值
            echo $data;
        }else{
            //没有值
            //接收传值
            $url = "http://api.map.baidu.com/telematics/v2/weather?location=".$city."&output=json&ak=1a3cde429f38434f1811a75e1a90310c";
            $data = file_get_contents($url);
            $redis->set(‘weather‘,$data);
            echo $data;
        }

    }
}

 

html代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="text" name="city" id="city" placeholder="请输入城市"/>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<script src="__STATIC__/jq.js"></script>
<script>
    //绑定失去焦点事件
    $("#city").blur(function(){
        //获取文本框的值
        var city = $(this).val();
        if(city==""){
            alert("城市不能为空");return;
        }

        if(city.length>30){
            alert("长度不能大于30");return;
        }

        var reg = /^[\d|a-z|\u4e00-\u9fa5]+$/;
        if(reg.test(city)){
            //去后台调取接口
            $.ajax({
                url:"{:url(‘Exam/weather_do‘)}",
                type:"get",
                dataType:"json",
                data:{
                    city:city
                },
                success:function(data){
                    var x = [];
                    var y_max = [];//最高温度
                    var y_min = [];//最低温度
                    //循环拿到date数据,放进一个数组里面
                    $.each(data.results,function(k,v){
                        x.push(v.date);
                        //Y轴需要的数据以摄氏度分割
                        var tem = v.temperature;
                        var arr = tem.split("");
                        var arr2 = arr[0].split("~");
                        y_max.push(parseInt($.trim(arr2[0])));
                        y_min.push(parseInt($.trim(arr2[1])));
                    })

                    var options = {
                        title: {
                            text: 温度变化范围                 // 标题
                        },
                        xAxis: {
                            categories: x   // x 轴分类
                        },
                        yAxis: {
                            title: {
                                text: 温度变化范围                // y 轴标题
                            }
                        },
                        series: [{                              // 数据列
                            name: 最高气温,                        // 数据列名
                            data: y_max                     // 数据
                        }, {
                            name: 最低气温,
                            data: y_min
                        }]

                    };//配置
                    var chart = Highcharts.chart(container, options);//初始化
                }
            });
        }else{
            alert("正则匹配失败");return;
        }


    });
</script>
</body>
</html>

 

PHP请求天气预报接口,并且将最高温最低温展示到折线图

标签:实例化   php   https   初始化   func   set   tput   result   PHP代码   

原文地址:https://www.cnblogs.com/duye520/p/10556663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!