ajax请求数据返回天气情况和API接口的获取

最新推荐文章于 2021-08-05 22:16:12 发布

牛先森家的牛奶

最新推荐文章于 2021-08-05 22:16:12 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42681295/article/details/107303960

版权

ajax 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

php

6 篇文章 1 订阅

订阅专栏

ajax请求数据返回天气情况

最近发现一个很nice的API接口数据，正好今天有时间试了一下访问外部数据的测试

推荐聚合数据

注意：PHP接口数据使用前，先自己测试一下数据是否没有问题，没有问题之后再使用

在这里插入图片描述

查询天气.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>请输入天气：<input type="text" id="weather"></p>
  <p><button id="btn">提交查询</button></p>
  <script>
    var weather = document.querySelector("#weather")
    var btn = document.querySelector("#btn")
    btn.onclick = function () {
      var weather_value = weather.value
      // console.log(weather_value)
      var xhr = new XMLHttpRequest()
      xhr.open("GET", "./weatherData.php?city=" + weather_value)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
          // console.log(xhr.responseText)
          console.log(JSON.parse(xhr.responseText))
        }
      }
    }

  </script>
</body>

</html>

php请求数据

<?php

header('Content-type:text/html;charset=utf-8');
 
// +----------------------------------------------------------------------
// | JuhePHP [ NO ZUO NO DIE ]
// +----------------------------------------------------------------------
// | Copyright (c) 2010-2015 http://juhe.cn All rights reserved.
// +----------------------------------------------------------------------
// | Author: Juhedata <info@juhe.cn-->
// +----------------------------------------------------------------------
 
//----------------------------------
// 天气预报调用示例代码 － 聚合数据
// 在线接口文档：http://www.juhe.cn/docs/73
//----------------------------------
 
header('Content-type:text/html;charset=utf-8');
 
 
//配置您申请的appkey
//注意：以下appkey有改动
$appkey = "a7dd4cd17889f57c575c78c7858b1394abc";
 //请求前端发送的数据
$city = $_GET["city"];

//************1.根据城市查询天气************
$url = "http://op.juhe.cn/onebox/weather/query";
$params = array(
      "cityname" => $city,//要查询的城市，如：温州、上海、北京
      "key" => $appkey,//应用APPKEY(应用详细页查询)
      "dtype" => "",//返回数据的格式,xml或json，默认json
);
$paramstring = http_build_query($params);
$content = juhecurl($url,$paramstring);
$result = json_decode($content,true);
if($result){
    if($result['error_code']=='0'){
        // print_r($result);
        //这里改动为前端数据
        echo json_encode($result);
    }else{
        echo $result['error_code'].":".$result['reason'];
    }
}else{
    echo "请求失败";
}
//**************************************************
 
/**
 * 请求接口返回内容
 * @param  string $url [请求的URL地址]
 * @param  string $params [请求的参数]
 * @param  int $ipost [是否采用POST形式]
 * @return  string
 */
function juhecurl($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 , 'JuheData' );
    curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT , 60 );
    curl_setopt( $ch, CURLOPT_TIMEOUT , 60);
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER , true );
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 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) {
        //echo "cURL Error: " . curl_error($ch);
        return false;
    }
    $httpCode = curl_getinfo( $ch , CURLINFO_HTTP_CODE );
    $httpInfo = array_merge( $httpInfo , curl_getinfo( $ch ) );
    curl_close( $ch );
    return $response;
}

?>

在这里插入图片描述

补充网站API接口

既然说到数据的一些处理，那就说说AIP数据接口，哪些网站可能被我们使用呢？
发现哪里有xhr 请求相关的，比如无刷新页面请求一些数据，就可能有接口。

这里以堆糖为例：
在这里插入图片描述

总结：

先发现哪里有xhr 请求数据，就可能有接口数据；
复制接口路径到浏览器中测试，如果可以用，说明成功；
在本地localhost中使用外部数据（注意会跨域，用服务器代理解决跨域问题）；
如果本地服务器能打开，而且显示数据，则说明数据成功被我们使用；

服务器代理解决跨域问题：跨域的问题几种解决方案

牛先森家的牛奶

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ajax请求数据返回天气情况和API接口的获取

ajax请求数据返回天气情况查询天气.htmlphp请求数据最近发现一个很nice的API接口数据，正好今天有时间试了一下访问外部数据的测试推荐聚合数据查询天气.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫

专栏目录