用JS怎样显示自动获取城市和天气预报

JavaScript014

用JS怎样显示自动获取城市和天气预报,第1张

名称:265天气根据IP自动获得当地的天气情况

代码:<iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0&quoatmarginheight="0" scrolling="no"></iframe>

名称:QQ天气预报代码(一)

代码 :<iframe width="145" height="130" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://minisite.qq.com/Weather/news_new.html" allowTransparency="true"></iframe>

说明 :这种适合于在网页的边栏插入。但一个缺点是,上面的4个城市是既定的,无法改成别的。插 入时,选好网页上的位置,直接将左栏的源代码全部拷进去就行了

名称:QQ天气预报代码(二)

代码 :<IFRAME ID='ifm2' WIDTH='189' HEIGHT='190' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://weather.qq.com/inc/ss258.htm'></IFRAME>

说明 :这种 也适合于在网页的边栏插入。上面 的城市可以自定,比如厦门可改成别的。定制的方法是修改我代码中标红的数字,从1开始代表“香 港”开始,每个数字都代表一个城市,厦门是287,具体要哪个城市自己找一下罢。

名称:新浪天气预报代码

代码 :<IFRAME ID='ifm2' WIDTH='260' HEIGHT='70' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' src="http://news.sina.com.cn/iframe/weather/130101.html"></iframe>

说明 :这种适合于在网页的头栏插入。上面的城市可以自定,比如 石家庄可改成别的。

名称:QQ天气预报代码(三)

代码 :<iframe width="469" height="218" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://appnews.qq.com/cgi-bin/news_weather_search?city=厦门" allowTransparency="true"></iframe>

说明 :这种适合于在网页的正栏插入。上面的城市可以自定,比如厦门可改成别的。定制的方法是修改我代码中标红的 名称。这里比较简单,直接用汉字改就行了。比如是福州的,你就直接把“厦门”改成福州就行。

名称:QQ天气预报代码(四)

代码 :<iframe width=160 height=230 frameborder=0 scrolling=NO src=http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌></iframe>

名称:QQ天气预报代码(五)

代码 :<iframe src="http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌" frameborder="0" width="160" scrolling="no" height="230"></iframe>

刚刚去测试了一下,利用ajax的jsonp(跨域)的时候卡在了一个异常上:Uncaught SyntaxError: Unexpected token :。

这个异常是jd在对于ajax的跨域请求时没有对callback进行处理。所以无法让js获取到正确的json数据。

解决方案(php为例):用curl进行获取,也就是用后端做一次转发操作。jd官方也提供php的SDK。以下是我的jq的ajax代码 仅供参考。

$.ajax({

    url:'https://way.jd.com/showapi/address',

    data: {

        area:'鹿城',

        areaid:'101210710',

        needMoreDay:'0',

        needIndex:'0',

        needAlarm:'0',

        need3HourForcast:'0',

        appkey:'你申请的appkey',

        ajax:1

    },

    type: "GET",

    async:false,

    dataType : "jsonp",

    jsonp:'callback',

    jsonpCallback:"jdwx",//jd返回json未对这个做处理导致js无法获取json

    success: function (json) {

        console.log(json)

    },

    error: function (msg) {

       console.log(msg)

    },

    timeout:3000

})

//这是我以前开发天气wedget的时候写过的代码,原理是连接到yahoo api(返回XML),先用cityCode查国家 然后用woeid查地方,这是测试时写过的代码。Yahoo 天气api 好像一部分收费 最后没用yahoo 用 weatherbug的api 那个代码忘了存在哪里了,如果 非常着急的话在跟我说吧 我给你找找,还有调用api的原理,一般不会直接调用api 因为每个人访问时都调用一次的话系统受不了。最好写个windows service 每个一段时间调用一次api然后以.xml形式存放到一个文件夹,在系统中只调用xml文件就好了。如果api一时访问不到了也不会出问题。

才看到你想要的是前台代码, 这是后台的

private string GetWeather(string cityCode)

{

string weather = string.Empty

if (cityCode == "" || string.IsNullOrEmpty(cityCode)) { cityCode = "seoul"}

XmlDocument document1 = new XmlDocument()

document1.Load("http://query.yahooapis.com/v1/public/yql?q=select * from geo.places where text=" + cityCode + "&format=xml")

XmlNodeList nodes1 = document1.GetElementsByTagName("woeid")

string strWoeid = nodes1[0].InnerText

XmlDocument document = new XmlDocument()

document.Load("http://weather.yahooapis.com/forecastrss?w=" + strWoeid + "&u=c")

XmlNodeList nodes = document.GetElementsByTagName("forecast",

@"http://xml.weather.yahoo.com/ns/rss/1.0")

foreach (XmlNode node in nodes)

{

Console.WriteLine("日期:{0},星期:{1},天气:{2},温度:{3}°C 至 {4}°C",

node.Attributes["date"].InnerText,

node.Attributes["day"].InnerText,

node.Attributes["text"].InnerText,

node.Attributes["low"].InnerText,

node.Attributes["high"].InnerText)

//FToC(int.Parse(node.Attributes["low"].InnerText)),

// FToC(int.Parse(node.Attributes["high"].InnerText)))

// //woeid

// // http://query.yahooapis.com/v1/public/yql?q=select * from geo.places where text="Wonju"&format=xml

}

return weather

}