AJAX 的天气查询

最新推荐文章于 2020-09-26 14:09:29 发布
最新推荐文章于 2020-09-26 14:09:29 发布
阅读量580 收藏
点赞数
分类专栏： Ajax Asp.net 文章标签： ajax xmlhttprequest class function input button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjinzaghi/article/details/2313649
版权

<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
          function makeRequest()
      {
        http_request = false;
       // alert(url);
         if (window.XMLHttpRequest)
         {
            http_request = new XMLHttpRequest();
             if (http_request.overrideMimeType)
             {
                http_request.overrideMimeType('text/xml');
             }
        }
         else if (window.ActiveXObject)
         { // IE
            try
             {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            }
             catch (e)
             {
                try
                 {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

         if (!http_request)
         {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        var txt = document.getElementById("city");
        var str =escape(txt.value);
        http_request.open('GET', "http://weather.cn.yahoo.com/weather.html?city="+str, false);
//       http_request.open('GET', "http://www.zbintel.com/demo/project/china/top.asp", false);
       
        http_request.send(null);
    }

    function alertContents()
    {
         if (http_request.readyState == 4)
            {
                 if (http_request.status == 200)
                 {
                    var kk=http_request.responseText;
                   alert(kk);
                   // document.getElementById("content").innerHTML=kk.substring(kk.indexOf("<!--{{start:今日 -->"),kk.indexOf("<!--{{start:今日 -->") +520)+"<br/>"+kk.substring(kk.indexOf("<!--{{start:明日 -->"),kk.indexOf("<!--{{start:明日 -->") +520);
                
                    //alert(document.getElementById("content").innerHTML);
                }
                else
                 {
                    alert('There was a problem with the request');
                }
        }
    }
     </script>
</head>
<body>
    <div>
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                   <td height="80" colspan="3" align="center" valign="middle">
                        <br />
                        <h2>
                            天气预报查询</h2>
                        <span>
                            <br />
                            请输入城市：</span>
                        <input type="text" class="bd2" id="city" />
                        &nbsp;
                        <input type="button" οnclick="makeRequest()" class="bd" value=
                             "查询" />
                        <center style="color: Red; font-size: 20px; display: none"
                             id="loadingflag">
                             正在查询天气状况......</center>
                        <div id="content" class="content2">
                        </div>

                   </td>

              </tr>

          </table>

     </div>

</body>

</html> 

yjinzaghi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax获取json格式的天气
During_xs的博客
08-11 464
Ajax获取json格式的天气
ajax天气查询
weixin_30477797的博客
03-15 171
直接发上代码： <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>天气查询</title> <style> .div1{display: inline-block;*display: inline;...
用ajax查询天气
weixin_30652491的博客
01-05 503
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> ...
天气查询ajax and xml
Stephen__Wu的博客
09-30 371
首先: 要在网上查得三个资料 // 免费天气接口 // http://wthrcdn.etouch.cn/WeatherApi?city= // 方法 :get // 地址:就这个 // key:city第二,要有ajax get 资料的知识 有五步: 1创建一个xml对象; 2设置请求行 3请求头(
聚合数据全国天气预报--ajax 通过城市名取数据
ishxiao的博客
11-16 2466
聚合数据天气预报API：https://www.juhe.cn/docs/api/id/39 接口地址：http://v.juhe.cn/weather/index 支持格式：json/xml 请求方式：get 请求示例：http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请
AJAX天气预报前台
11-30
loadifo”).innerHTML = ... //显示天气描述 document.getElementById("info").innerHTML = "天气描述：" + xmlInfo[0].firstChild.nodeValue; } else{ alert("错误：" + xmldoc.status); } } } </script> </head>
和风天气查询（原声ajax版本）
04-22
【标题】"和风天气查询（原声ajax版本）"是一个基于前端技术实现的天气查询应用，它利用AJAX（Asynchronous JavaScript and XML）技术，实现了页面无刷新的情况下获取并展示实时天气信息。这个应用主要面向...
ajax获取用户所在地天气的方法
01-21
使用ajax获取用户所在地的天气，供大家参考，具体内容如下 1.要获取用户归属地的天气，首先得获取用户所在的市区，这里先获取用户的IP，通过IP获取IP的归属地，从而得到用户地址。 2.因为阿里云提供了通过城市名...
2023最新ajax请求第三方接口天气预报案例.docx
06-09
在本案例中，我们利用Ajax来请求第三方接口获取天气预报数据，以此来动态更新网页内容，提高用户体验。具体步骤如下： 1. 创建XMLHttpRequest对象：在JavaScript中，我们首先通过`new XMLHttpRequest()`来创建一个...
ajax获取天气信息
world_zhishijie的博客
11-08 1147
$.getJSON("http://query.yahooapis.com/v1/public/yql", {q: "select * from json where url=\"http://www.weather.com.cn/data/cityinfo/101190501.html\"",format: "json"}, function(data) {            var $c
通过ajax获取天气，城市编码见注释
08-05
通过ajax请求360天气开放api获取实时天气，返回包括早晨、白天、夜间的（天气，温度，穿衣，感冒，空调，污染，洗车，运动，紫外线，pm2.5等信息），具体城市编码见注释链接，可查询；
AJAX技术来实现天气预报功能
10-01
AJAX技术来实现天气预报功能
ajax实现天气动态刷新
12-07
使用ajax来实现城市天气的动态刷新功能。
天气预报的Ajax效果
weixin_33941350的博客
01-08 567
最近在网站上看了很多显示实时天气预报的，挺实用而且用户体验也不错。对用户的帮助也比较大，用户可以通过你的网站了解到实时的天气信息。感觉比较有意思，于是自己钻研了一下其中的实现方法。于是决定把代码分享给大家，希望能对大家的前端事业有所贡献。 原理其实很简单。就是当页面加载进来之后，请求php文件，返回一组json。这组json就是我们所需要的有关天气的信息。我们只需要把返回来的json解析以后，放...
AJAX实现的天气预报查看
我的博客新地址： http://www.n-pei.com
07-15 2660
 1.       Introduction:首先说明一下整个程序的结构:     通过使用javascript和ajax方法来得到某个城市的天气。从web页面传给服务器需要显示天气情况的城市名称,然后在服务器端通过httpwebresponse方法得到腾讯的天气显示。这里建议如果是商业使用请使用google。2.       Detail Design:详细的实现
Ajax天气预报设置
qq_37171379的博客
04-04 279
浏览器由于安全方面的问题，禁止ajax跨域请求其他网站的数据。 解决：利用本域php代理间接获得其他网站的数据。 通过php代理获得天气信息： php跨域获得其他网站地址信息： ...
一个基于jQuery ajax的天气预报小应用
王先帅的博客
11-16 4176
作者：旺仔    这段时间又忙里投了个闲，准备搞点东西玩玩，正好这几天在网上查有没有免费的实时公交接口，发现这些接口都是收费的，因为禳中羞涩，所以还是放弃了，正好同事说他知道一个免费的天气预报api还挺好玩的，便要来玩一玩，做了一个天气预报的小应用 ，下面是代码，简单易懂： p,ul{margin: 0;padding: 0;} .div{ width: 50
2020.9.18AJAX概念及天气预报案例
weixin_46669997的博客
09-26 315
AJAX异步交互: 01_什么是AJAX？ AJAX = 异步 JavaScript 和 XML。 也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 02_AJAX操作步骤： 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 1.创建异步请求对象 var xmlhttp; if (window.XMLHttpRequest) {
jquery ajax 天气预报查询
最新发布
06-28
### 回答1： jQuery Ajax 可以用来实现天气预报查询功能。具体实现步骤如下： 1. 获取用户输入的城市名称。 2. 构造一个 URL，将城市名称作为参数传递给天气预报 API。 3. 使用 jQuery Ajax 发送 GET 请求，获取天气预报数据。 4. 解析返回的 JSON 数据，提取需要的信息，如温度、天气状况等。 5. 将提取的信息显示在页面上，以便用户查看。 需要注意的是，天气预报 API 的使用需要申请 API Key，具体申请方式可以参考 API 提供方的文档。同时，由于天气预报数据的更新频率较高，建议使用缓存机制，避免频繁请求 API。 ### 回答2： jQuery是一种流行的JavaScript库，它提供了一种简单的方式来操作DOM对象并执行异步请求。通过jQuery的Ajax功能，我们可以实现向后端服务器发送异步请求，并且无需页面刷新即可在页面上响应返回结果。使用jQuery的Ajax功能可以使我们实现获取实时天气的功能，以下是基于jQuery实现天气预报查询的步骤： 第一步：获取天气API接口 在查询之前，我们需要先获得一个可信的天气 API 接口。目前，市场上存在大量的气象和天气API供应商，可以选择APIStore、心知天气、中国气象数据服务平台等供应商的API接口，这里以心知天气API为例。 第二步：实现页面布局 通过HTML和CSS实现一个简单的页面布局，使用户可以输入城市名并查询对应的天气信息。 第三步：异步请求天气信息 使用jQuery的Ajax功能发送异步请求，在页面上响应返回的结果。通过以下代码可以实现向心知天气API发送异步请求获取天气预报信息： $.ajax({ url: "https://api.asilu.com/weather/", type: "GET", data: { city: city }, dataType: "jsonp", success: function(data) { // 在页面上响应返回的结果 }, error: function() { alert("请求失败，请检查网络！"); } }); 第四步：页面显示天气信息 通过 jQuery 的Select工具，定位到需要显示数据的 DOM 节点，在 DOM 节点上更改文本内容。通过以下代码可以实现在页面上显示天气预报信息： $("#weather").html("城市：" + data.city + "<br>" + "日期：" + data.date + "<br>" + "天气：" + data.weather + "<br>" + "温度：" + data.temperature + "<br>" + "风向：" + data.windDirection + "<br>" + "风力：" + data.windPower + "<br>"); 以上就是利用jQuery 实现天气预报查询的基本步骤。随着技术的不断进步和API接口的更新，天气预报查询功能也将不断优化。 ### 回答3： jquery ajax 天气预报查询是一种基于 jQuery 和 ajax 技术开发的天气预报查询服务，通过向天气预报 API 发送 HTTP 请求，获取实时天气信息。该服务不仅在前端页面上提供用户便捷的天气查询，同时拓展了 javascript 开发的应用范围，以便于开发可视化数据查询，数据分析和监控等应用。 使用 jquery ajax 天气预报查询服务，首先需要申请天气 API key。将 API key 保存至变量中，通过 jQuery 的事件处理函数获取用户输入的城市名称，构建 HTTP 请求 URL，发送请求数据获取 json 格式的数据。将数据解析后显示在页面上，通过 CSS 样式进行美化。 该服务能够获取天气信息中的气温、空气湿度、风力等指标，并按照用户需求进行定制化展示，如图标、背景色、动画等。查询的过程中不需要刷新页面即可返回实时的天气信息，实时性较高，用户体验良好。 虽然该服务具有一定的便利性和易用性，但是在使用过程中，需要注意一些问题，如 API key 的安全性和率限制、数据解析错误、网络传输出错等。同时，应该遵循天气 API 接口的使用原则和服务条款，避免滥用、超过频率限制等行为。 总的来说，jquery ajax 天气预报查询服务为我们提供了一种快捷、方便、可视化的天气信息查询服务。通过灵活运用 jQuery iframe ajax 技术，不仅满足了用户信息查询的需求，同时为我们提供了开发可视化应用的参考范例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值