js的ajax访问外部接口实现获取实时段子信息,获取当地天气信息

最新推荐文章于 2023-02-08 22:51:57 发布

林不羁

最新推荐文章于 2023-02-08 22:51:57 发布

阅读量404

点赞数

分类专栏： JavaScript Ajax 文章标签： ajax 外部接口 js

本文链接：https://blog.csdn.net/qq_36337754/article/details/102857682

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <button type='submit' onclick="getInfo()">查询</button>
  <p id="info"></p>
  <script>
    function getInfo(){
      let url='https://api.apiopen.top/getJoke?page=1&count=2&type=video';

      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4){//请求完成
          if(xhr.status===200){//响应成功
            return success(xhr.responseText);
          }else{
            alert('失败！');
          }
        }
      }
      xhr.open('Get',url);//指定请求的方式和一些属性
      xhr.send();//发送请求
    }
    function success(data){
      let info =document.getElementById("info");
      let getInfo=JSON.parse(data);
      console.log(getInfo);
      if(getInfo.code===200){
        info.innerHTML=getInfo.result[0].text+"<img src='"+
        getInfo.result[0].thumbnail+"'/>";

      }else {
        info.innerHTML=shiren.message;
      }
    }
  </script>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简单的天气查询</title>
</head>

<body>
  <p>输入当前城市:<input type="text" id="city"></p>
  <button type="submit" onclick="getWeather()">查询</button>
  <p id="weatherInfo"></p>
  <script>
    function getWeather() {
      let url = 'https://www.apiopen.top/weatherApi?city=';
      let city = document.getElementById('city');
      // 获取要查询的城市
      let newURL = url + city.value;
      console.log(newURL);
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {//请求完成
          if (xhr.status === 200) {//响应成功
            return success(xhr.responseText);
          } else {
            alert('失败！')
          }
        }
      }
      xhr.open('GET', newURL);//指定请求的方式和一些属性
      xhr.send();//发送请求
    }
    function success(data) {
      let weather = document.getElementById('weatherInfo');
      let weatherInfo = JSON.parse(data);
      if (weatherInfo.code === 200) {
        weather.innerHTML = '查询成功' + '<br>' +
          '当前城市：' + weatherInfo.data.city + '<br>' +
          '当前温度：' + weatherInfo.data.wendu + '<br>' +
          '气温：' + '最' + weatherInfo.data.forecast[0].high + '，最' + weatherInfo.data.forecast[0].low + '<br>' +
          '天气：' + weatherInfo.data.forecast[0].type + '<br>' +
          '风向：' + weatherInfo.data.forecast[0].fengxiang + weatherInfo.data.forecast[0].fengli + '<br>' +
          '注意：' + weatherInfo.data.ganmao
      } else {
        weather.innerText = weatherInfo.msg;
      }
    }
  </script>
</body>

</html>

林不羁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js的ajax访问外部接口实现获取实时段子信息,获取当地天气信息

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
复制链接

扫一扫