1 <?php 2 //接收地址 3 isset($_GET['search'])?$search=$_GET['search']:$search = "shanghai"; 4 // 查詢url 5 $url = "http://api.k780.com:88/?app=weather.future&weaid={$search}&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json"; 6 $arr = file_get_contents($url); 7 $json = json_decode($arr,true); 8 $jsonstr = $json['result']; 9 // 遍歷 星期 地區 溫度 入庫 10 foreach ($jsonstr as $key=>$val){ 11 $week[] = $val['week']; 12 $cityno[] = $val['cityno']; 13 $citynm[] = $val['citynm']; 14 $temperature[] = $val['temperature']; 15 $temperaturearr[] = array((int)$val['temp_low'],(int)$val['temp_high']); 16 } 17 //循環添加入庫 18 $pdo = new PDO("mysql:host=127.0.0.1","root","root"); 19 for ($i=0;$i<=6;$i++){ 20 $sql = "insert into `mouth861a` (week,cityno,citynm,temperature) values ('$week[$i]','$cityno[$i]','$citynm[$i]','$temperature[$i]')"; 21 $pdo->exec($sql); 22 } 23 $data['week'] = $week; 24 $data['temp_low'] = $temperaturearr; 25 $data['search'] = $search; 26 echo json_encode($data); 27 //echo "<pre>"; 28 //var_dump($data);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>天氣預報搜索</title> 6 <script src="jquery-3.3.1.min.js"></script> 7 <script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script> 8 <script src="https://img.highcharts.com.cn/highcharts/highcharts-more.js"></script> 9 <script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script> 10 <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> 11 </head> 12 <body> 13 <center> 14 <h1>天氣預報</h1> 15 <input type="text" id="search"> 16 </center> 17 <div id="container" style="min- 310px; height: 400px; margin: 0 auto"></div> 18 <script> 19 // JS 代码 20 //構造天氣預報溫度方法 21 function weekweudu(data) { 22 var chart = Highcharts.chart('container', { 23 chart: { 24 type: 'columnrange', // columnrange 依赖 highcharts-more.js 25 inverted: true 26 }, 27 title: { 28 text: '温度变化范围' 29 }, 30 subtitle: { 31 text: data.search 32 }, 33 xAxis: { 34 categories: data.week 35 }, 36 yAxis: { 37 title: { 38 text: '温度 ( °C )' 39 } 40 }, 41 tooltip: { 42 valueSuffix: '°C' 43 }, 44 plotOptions: { 45 columnrange: { 46 dataLabels: { 47 enabled: true, 48 formatter: function () { 49 return this.y + '°C'; 50 } 51 } 52 } 53 }, 54 legend: { 55 enabled: false 56 }, 57 series: [{ 58 name: '温度', 59 data: data.temp_low 60 }] 61 }); 62 } 63 </script> 64 </body> 65 </html> 66 <script> 67 $(document).on("blur","#search",function () { 68 //接收id值 69 var search = $("#search").val(); 70 //失焦事件判断文本框内容不能为空 71 if (search==""){ 72 alert("文本框内容不能为空"); 73 } 74 //判断文本值长度不能大于30字符 75 if (search.length>30){ 76 alert("文本值长度不能大于30字符"); 77 } 78 //判断文本值必须为数字/字母/汉字 79 if (!/[d]|[A-Za-z]|[u4e00-u9fa5]/.test(search)){ 80 alert("文本值必须为数字/字母/汉字"); 81 } 82 $.ajax({ 83 url:"search.php", 84 data:{ 85 search:search, 86 }, 87 success:function (data) { 88 // console.log(data); 89 var data=JSON.parse(data); 90 // console.log(data); 91 //調用天氣預報方法 92 weekweudu(data); 93 } 94 }) 95 }) 96 </script>