我在论坛上找了很多动态加载js的方法答案,效果不是很理想,后来在sina里看到了答案。
缘由是这样的:
我现在需要动态取天气预报,sina里有查询的api
url是:http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=上海
该url返回的一个js方法
内容是:
(function(){var w=[];w['上海']=[{s1:'雷阵雨',s2:'雷阵雨',f1:'leizhenyu',f2:'leizhenyu',t1:'35',t2:'27',p1:'3-4',p2:'3-4',d1:'西南风',d2:'东风'}];var add={now:'2011-07-04 15:17:20',time:'1309763840',update:'北京时间07月04日08:00更新',error:'0',total:'1'};window.SWther={w:w,add:add};})();//0
我程序需要调用这个接口,并解析其中的数据显示在页面上,我先通过程序读取该url,并把返回的js原样不变动态输出
程序接口叫:sinaweather.action?city=上海
此时我页面需要使用jquery的方式动态调用我的action并把查询回来的结果显示在我的页面上
这需要使用到动态加载js,因为我的页面每输入一个城市,都要动态调用sinaweather.action?city=输入城市名 来方法返回对应城市的js代码,我把论坛上动态加载js的方式都使用了,但是就是不能取得sina返回的js代码中定义的参数SWther,再次点击则可以,原因分析是因为js是异步加载的,我点击查询的上海可能还没完成加载完成,这时候调用sina返回的js是有问题的。在sina里看到了答案:
function fetch_js(url,dispose){
var Snode = document.createElement("script");
Snode.setAttribute("type", "text/javascript");
if(url.indexOf("?") != -1){
url += "&random=" + (new Date()).getTime();
}else{
url += "?random=" + (new Date()).getTime();
};
Snode[Snode.onreadystatechange === null ? "onreadystatechange" : "onload"] = function(){
if (this.onreadystatechange){
if (this.readyState != "loaded" && this.readyState != "complete") {return false;}
};
if(dispose){dispose()};//完成js加载后,这里调用显示查询结果显示在页面上
this[this.onreadystatechange ? "onreadystatechange" : "onload"] = null;
}
Snode.setAttribute("src", url);
document.getElementsByTagName("head")[0].appendChild(Snode);
}
function show(){
for(i in SWther.w){
var s1= SWther.w[i][0].s1;
var h_t1= SWther.w[i][0].t1;
var l_t2= SWther.w[i][0].t2;
var d1 = SWther.w[i][0].d1;
var p1 = SWther.w[i][0].p1;
var s = "天气情况:"+s1+",最高气温:"+h_t1+",最低气温:"+l_t2+","+d1+" "+p1+"级";
$("#weather").html(s);
}
}
function go(){
var city = $("#city").val();
alert(city);
var url = encodeURI("./sinaWeather.action?city="+city+"&r="+Math.random());
fetch_js(url,show);
}
输入城市名:<input type="text" id="city" name="city" value="上海"/>
<input type="button" name="c_l" onclick="go()" value="查询">
<div id="weather"></div>
分享到:
相关推荐
天气预报 [nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果] 在线:http://wangxinsheng.herokuapp.com/weather [heroku服务器访问国内好像很慢。。。所以抓取页面也特别慢] nodejs抓取页面,js...
用法:运行脚本并传入天气预报网站的URL,脚本会爬取天气信息,并打印出相关的数据。 爬虫需要遵守网站的robots.txt文件规定,确保不爬取被禁止的内容。 在实际使用中,可能需要处理反爬虫机制,如验证码、动态加载...
本文研究的主要是Python爬虫天气预报的相关内容,具体介绍如下。 这次要爬的站点是这个:http://www.weather.com.cn/forecast/ 要求是把你所在城市过去一年的历史数据爬出来。 分析网站 首先来到目标数据的网页 ...
此次的目标是爬取指定城市的天气预报信息,然后再用Python发送邮件到指定的邮箱。 下面话不多说了,来一起看看详细的实现过程吧 一、爬取天气预报 1、首先是爬取天气预报的信息,用的网站是中国天气网,网址是...
如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...
WeatherDashboard 这将是一个网站,显示给定城市的五天天气预报。 有一个按钮将清除本地存储。 当您单击按钮时,下次单击重新加载按钮时,将不会加载新城市,并且屏幕将重置。 如果您单击浏览器的“重新加载”按钮,...
ioBroker Adapter可从加载您所在位置的24小时天气预报。 适配器将加载所有15分钟(默认)的每日和每小时预测数据。笔记您可以在提供官方“ PWS所有者” API密钥的情况下使用此适配器,也可以将API密钥留空以使用从...
19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用...
19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用...
使用openweathermap.org网络API构建天气预报站点。 现场演示 点击进行现场演示 截屏 建于 HTML和CSS 引导程序 JavaScript / ES6 提取Api Webpack 埃斯林特 样式皮棉 用法 要启动天气应用程序,请单击实时演示...
使用纯Javascript动态生成所有页面信息并实现组件加载。 向公开的 API请求天气信息。建于HTML5, CSS3, Javascript, Webpack现场演示入门要获取本地副本并在开发模式下运行,请按照以下简单步骤操作。先决条件...
使用OpenWeather API显示您要搜索的城市的天气预报 链接到现场 使用的技术 JavaScript 71.8%HTML 23.7%CSS 4.5% 小样 为什么我做这个项目 我之所以做这个项目,是因为我想将第三方API集成到我的代码中。 我调用...
基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip ...天气预报更新周期 指定颜色主题 HTML5结构 css采用sass 布局采用css3中的flex 部分js使用了ES6+ 图表采用百度echarts
如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行程序。 有关更多信息,请参见关于的部分。npm run build 构建生产到应用程序build文件夹。 它在生产...
如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在...
概括这是一个使用来显示天气数据的天气应用程序。这使用Angular 11制作前端。可以在https://abhishekkrmehta.github.io/weather-app/查看演示开发服务器安装Angular CLI和Node.js导航到项目目录并运行npm install为...
此天气预报显示您搜索的任何城市的当前天气。 它还将在当前天气下显示该城市未来五天的天气预报。 该网站使用从oepn weather API中获取的数据来显示天气预报。 使用的第一个API是地理编码器,该地理编码器获取城市...
如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...
天气插件Weather Plugin是chrome的扩展...显示默认城市及其当前天气,天气预报和紫外线指数 变化中的城市 显示警告,告诉我们openweathermap数据库中不存在城市 显示一些天气图像的例子 改变天气预报时间 显示示范城市