ajax调取数据，搜索天气预报

最新推荐文章于 2023-05-09 00:23:06 发布
最新推荐文章于 2023-05-09 00:23:06 发布
阅读量1.5k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42603150/article/details/82689947
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .span{
            color: black;
            font-size: 16px;
        }
        .div_div{
            color: blue;
            font-size: 20px;
            margin-left: 10px;
        }
        .div{
            color: red;
            font-size: 20px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="div">

</div>


<div id="box">

</div>

<input type="text" id="ipt">
<button id="btn">点击按钮</button>
</body>

</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script>

    function fn(id){
        $.ajax({
            url:'https://www.apiopen.top/weatherApi?city='+id,
            type:'post',
            dataType:'json',
            success:function (data) {
                console.log(data.data);
                var arr=data.data;
                var str=data.data.yesterday;
                console.log(str);

                $('#div').append('<div class="div"><span class="span">城市地点为</span>'+arr.city+'</div>'
                    +'<div class="div_div"><span class="span">天气情况</span>'+arr.ganmao+'</div>');

                    $('#box').append('<div class="div"><span class="span">最高气温</span>'+str.high+'</div>'+
                        '<div class="div_div"><span class="span">最低气温</span>'+str.low+'</div>'+
                        '<div class="div_div"><span class="span">云的厚度</span>'+str.type+'</div>'+
                        '<div class="div_div"><span class="span">空气风向</span>'+str.fx+'</div>')

            }
        })
    }

    $('#btn').click(function () {
        var va=$('#ipt').val();
        fn(va);

    });

    $.ajax({
        url:'http://localhost:3000/item/logo',
        type:'get  ',
        dataType:'json',
        success:function(data){
            console.log(data)
            for(i in data){
                $('#div').append('<div></div>')
            }


        }
    })

</script>
郭豪杨
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax 通过城市名获取数据(全国天气预报API)
12-02
通过这个案例，我们可以学习到如何使用Ajax技术结合第三方API获取实时天气数据，以及如何在前端页面上动态展示这些数据。这在开发交互式Web应用时非常有用，尤其是那些需要频繁更新局部内容的应用，例如天气预报、...
ajax获取当前城市天气情况
贾世鑫的博客
08-23 2002
ajax获取当前城市天气情况 最进项目用到了天气的功能，经过不懈的努力终于有了一点收获，特此发上来与大家共享 js脚本<script type="text/javascript">$(document).ready(function(){ //得到当前地址 $.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.ph
关于Ajax查询天气的经典案例（利用模板引擎）代码全讲解
zhixuejia的博客
07-29 765
主要思路：分析我们要干的事 1.首先引入模板引擎、JQ文件 2.搭建html页面 3.给button绑定事件 1.首先我们获取到输入框的值 2.然后引入Ajax($.ajax({})) 3.给url地址 4.给服务器传输数据 5.期望返回值为json 6.成功后获取返回值打印出来观察数据格式那部分是我们想要的 7.定义模板引擎在里面写好我们期望的代码格式并对数据进行遍历 8.引用引擎模板将其给到html页面 <!DOCTYPE...
js用ajax请求天气接口
chenglvqi6440的博客
03-31 684
function findWeather() { var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'; $.getScript(cityUrl...
Ajax 天气预报API案例
m0_64355119的博客
05-09 535
【代码】Ajax 天气预报API案例。
Ajax怎么获取天气,请问网页中如何读取ajax返回的天气预报json数据？
weixin_42485891的博客
08-05 420
$(document).ready(function() {// 天气$.getJSON("http://query.yahooapis.com/v1/public/yql", {q: "select * from json where url=\"http://m.weather.com.cn/atad/101190101.html\"",format: "json"}, function(da...
AJAX天气预报前台
11-30
loadifo”).innerHTML = “正在加载数据…” for(i=0;i;i++) { settime(loadtime); } } else if(xmldoc.readyState == 4){ if(xmldoc.status == 200){ //处理XML数据 ifodis(); //解析XML数据 var xmlRoot = xmldoc....
PHP+AJAX无刷新实现返回天气预报数据
12-04
4. **JSON 格式**：中国气象网站提供的天气数据是以JSON（JavaScript Object Notation）格式返回的。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在PHP中，`json_decode()`函数将...
Ajax之实时天气预报源码.zip
06-18
Ajax之实时天气预报源码.zip
ajax请求获取天气,7. jquery-ajax请求天气接口
weixin_29889665的博客
08-05 1119
Ajax请求查询天气// Ajax请求：一般在刷新页面中的局部数据时，会使用ajax请求。该请求不会去重新刷新或请求这个页面中的所有数据，而只是动态的修改一部分数据。function getWeather() {// 通过ajax向天气接口发送请求// $.get('url', '请求成功之后的回调函数');// $.post('url', 'POST参数', '请求成功之后的回调函数');$....
domino ajax 天气预报
02-25
之前写了一个cs报表的天气预报，现在上传一个bs版本的 1)jquery+ajax实现
ajax获取外网天气预报
03-18
利用ajax技术，获取外网上别人提供的天气预报，利用公网提供的Web Service，解析xml序列串，得到自己想要的天气预报信息
使用JS在页面前端获取天气预报
04-25
function getWeatherInfo { $ getScript "http: php weather sina com cn js php " + $ param { city : $ "#position" val 城市 day : 0 password : "DJOYnieT8234jlsK" } function json { $ "#weatherinfo" html "<img src "weather "+ status1 +" gif" style "vertical align:middle;" > <span style "vertical align:middle;">"+temperature1+"°< span>" ; } ; }">function getWeatherInfo { $ getScript "http: php weather sina com cn js php " + $ param { city : $ "#position" val 城市 day : 0 password : "DJOYnieT8234jlsK" } function json { $ "#weatherinfo" html "<img src "weather &qu [更多]
Ajax获取json格式的天气
During_xs的博客
08-11 464
Ajax获取json格式的天气
用ajax实现动态获取天气预报的案例
bellah521
07-19 4533
本文主要思想是用ajax实现动态获取天气预报
使用 Ajax 获取天气预报的数据
YXB413的博客
05-20 2486
<table id="weather" style="border: 1px solid #ff9000; margin: auto; margin-top: 100px;"> </table> var ourXHR ; function Sky(city) { var uri = "http://wthrcdn.etouch.cn/weather_mini?city="...
利用AJAX做天气预报
weixin_47250504的博客
06-27 2565
天气预报一、添加Jquery事件、方法二、HTML主体部分三、运行结果 上一周我们初步学习了AJAX的概念。 这一周我们可以利用AJAX尝试着做一个天气预报界面。 一、添加Jquery事件、方法 document.addEventListener('plusready', function(){}); $(document).ready(function() { $("button").click(function() { var city = $("#city").val();
用jquery的ajax技术编写动态天气预报
最新发布
06-28
### 回答1： 动态天气预报可以使用jQuery的ajax技术来实现。首先需要获取天气预报的API接口，然后通过ajax请求获取数据，最后将数据展示在页面上。 具体步骤如下： 1. 获取天气预报的API接口，例如：http://api.openweathermap.org/data/2.5/weather?q=北京&appid=API_KEY 2. 在页面中引入jQuery库和自己编写的JavaScript文件 3. 编写JavaScript代码，使用jQuery的ajax方法请求天气预报数据，并将数据展示在页面上 示例代码如下： ```javascript $(document).ready(function() { // 定义API接口和城市名称 var api = "http://api.openweathermap.org/data/2.5/weather?q="; var city = "北京"; var apiKey = "API_KEY"; // 请替换为自己的API Key // 发送ajax请求获取天气预报数据 $.ajax({ url: api + city + "&appid=" + apiKey, type: "GET", dataType: "json", success: function(data) { // 解析返回的数据 var weather = data.weather[].description; var temp = Math.round(data.main.temp - 273.15); var humidity = data.main.humidity; var wind = data.wind.speed; // 将数据展示在页面上 $("#weather").html(weather); $("#temp").html(temp + "℃"); $("#humidity").html(humidity + "%"); $("#wind").html(wind + "m/s"); }, error: function() { // 处理请求失败的情况 alert("获取天气预报失败！"); } }); }); ``` 在页面中添加以下HTML代码，用于展示天气预报数据： ```html <div id="weather"></div> <div id="temp"></div> <div id="humidity"></div> <div id="wind"></div> ``` 以上代码可以获取北京的天气预报数据并展示在页面上，如果需要获取其他城市的天气预报数据，只需要修改city变量的值即可。 ### 回答2： 动态天气预报是指根据用户输入的城市和日期等参数动态获取对应的天气信息并展示在页面上。使用jQuery的ajax技术可方便地实现这一功能。 1. 获取天气数据 首先，需要找到一个可用的天气API接口，例如中国天气网的API接口，该接口以JSON格式返回天气数据。然后，采用jQuery的ajax方法，通过异步请求获取数据，代码如下： ``` javascript $.ajax({ type: "get", url: "http://www.weather.com.cn/data/cityinfo/101010100.html", // 天气API接口链接 dataType: "jsonp", // 需要使用JSONP跨域请求 success: function(data) { // 处理返回的天气数据 }, error: function(xhr, status, error) { console.log(xhr); console.log(status); console.log(error); } }); ``` 2. 处理天气数据 接下来，需要根据返回的天气数据，对页面中的天气信息进行更新。处理天气数据的过程可能因接口的不同而略有差异，需要根据具体的接口文档进行处理。 例如，中国天气网的API接口返回的数据中，天气信息保存在`weatherinfo`属性中，其中包括温度、天气状况、风向、风力等信息。处理数据的代码示例如下： ``` javascript success: function(data) { var weatherinfo = data.weatherinfo; // 获取天气信息并更新页面元素 $("#cityName").text(weatherinfo.city); $("#temp").text(weatherinfo.temp); $("#weather").text(weatherinfo.weather); $("#wind").text(weatherinfo.wd); $("#windLevel").text(weatherinfo.ws); }, ``` 3. 实现查询功能 最后，需要实现用户输入城市和日期等参数，查询对应的天气信息。可以在查询按钮的点击事件中，获取用户输入的参数，拼接成天气API接口链接，并使用ajax方法获取天气数据。查询功能的代码示例如下： ``` javascript $("#searchBtn").click(function() { var cityName = $("#cityInput").val(); var date = $("#dateInput").val(); var url = "http://www.weather.com.cn/data/cityinfo/" + cityName + ".html"; $.ajax({ type: "get", url: url, dataType: "jsonp", success: function(data) { // 处理返回的天气数据 }, error: function(xhr, status, error) { console.log(xhr); console.log(status); console.log(error); } }); }); ``` 以上就是使用jQuery的ajax技术编写动态天气预报的基本过程。当然，还可以进一步美化页面、添加动态效果、加入其它功能等。 ### 回答3： 动态天气预报指的是在网页中实时显示当地天气情况，实现这一功能可以利用jquery的ajax技术。首先我们需要从一个天气API中获取天气数据，API需要提供一个URL地址，经过访问后返回JSON格式的数据。下面介绍如何利用jquery的ajax技术进行开发。 1.准备jquery库 在头部引入jquery库，可以利用cdn进行引入，也可以下载至本地进行引入，如下: <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 2.编写HTML代码 展示天气信息的div容器，在此处添加展示当地天气预报的html代码，如下： <div id="showWeather"></div> 3.编写JS代码 3.1 获取天气API 在JS中定义获取API的url，代码如下： var weatherUrl = 'http://api.map.baidu.com/telematics/v3/weather?location='+city_name+'&output=json&ak=your_ak'; 其中，city_name是需要获取天气的城市名，your_ak是在百度开发平台注册的ak。 3.2 利用ajax获取天气数据 在JS中定义ajax请求，来获取天气数据，代码如下： $.ajax({ url:weatherUrl, type:"get", dataType:"jsonp", success:function(data){ //在此处进行展示天气预报的相关操作 } }); 需要注意的是，利用ajax进行请求，需要将dataType设置为"jsonp"，因为API返回的是JSONP格式数据。 3.3 展示天气预报 在JS中接收到天气数据之后，需要将数据展示在网页中。以下是示例代码： var weatherData = data.results[0].weather_data;//获取天气数据 var showWeather=document.getElementById("showWeather");//父容器 for(var i=0;i<4;i++){ //遍历天气数据 var div=document.createElement("div"); //新建一个节点 div.innerHTML='<span>'+weatherData[i].date+'</span>'+ '<span>'+weatherData[i].weather+'</span>'+ '<span>'+weatherData[i].wind+'</span>'+ '<span>'+weatherData[i].temperature+'</span>'; showWeather.appendChild(div);//将节点插入 } 通过以上操作，我们就可以实现动态天气预报的功能。其中，需要注意的是获取API请求的url和天气数据的遍历方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值