Jquery跨域读取城市天气预报信息
最新项目中遇到一个问题，页面需要显示一些天气信息，但是部署网站的服务器没连接外网，只有客户端的电脑能连外网，于是想用js去实现这个功能。
刚开始找了一些方法，单独在浏览器中可以使用，但是在项目中运行的时候IE会提示jquery拒绝访问，上网一查才知道这个方法涉及到了跨域访问的问题。
于是寻找解决方案：
1.先在head中引用这两个js，第二个js是中国天气网的api，因为我需要查的只是海淀的天气情况，所以写成了固定值，到时候换成需要查询的城市名称就可以了。
<script type="text/javascript" src="js/jquery-1.6.2-min.js"></script> <script type="text/javascript" src="http://9snow.org/weather/api?city=海淀&var=test1&jsoncallback=?"></script>
2.普通的ajax方法不能跨域，需要用jQuery.getJSON方法获取，在传url的时候，地址的后面要跟一个callback回调函数的字符串，如果是问号，则默认走第三个参数的
回调函数，返回的json值为test1，然后像普通json那样解析就可以了。
$(function () { var url = "http://9snow.org/weather/api?city=海淀&var=test1"; jQuery.getJSON(url + "&callback=?", function () { if (test1) { var info = eval(test1); var value = "城市:" + info["weatherinfo"].city; value += ",温度:" + info["weatherinfo"].temp1; value += ",今日天气:" + info["weatherinfo"].weather1; alert(value); } }); });
3.下面是返回数据的格式以及各个参数的意思
//数据格式及参数说明 // { // "weatherinfo": { // "city": "海淀", // 城市中文名 // "city_en": "haidian", // 城市英文名 // "date_y": "2013年10月11日", // 发布日期 // "date": "", // ? // "week": "星期五", // 周信息 // "fchh": "18", // 信息发布时的整点小时数 // "cityid": "101010200", // 城市ID // "temp1": "18℃~26℃", // 今日气温 // "temp2": "17℃~29℃", // 明日气温 // "temp3": "18℃~23℃", // 第三日气温 // "temp4": "13℃~24℃", // 第四日气温 // "temp5": "15℃~31℃", // 第五日气温 // "temp6": "14℃~32℃", // 第六日气温 // "tempF1": "64.4℉~78.8℉", // 今日气温（华氏） // "tempF2": "62.6℉~84.2℉", // 明日气温（华氏） // "tempF3": "64.4℉~73.4℉", // 第三日气温（华氏） // "tempF4": "55.4℉~75.2℉", // 第四日气温（华氏） // "tempF5": "59℉~87.8℉", // 第五日气温（华氏） // "tempF6": "57.2℉~89.6℉", // 第六日气温（华氏） // "weather1": "多云", // 今日天气 // "weather2": "晴转多云", // 明日天气 // "weather3": "雷阵雨转小雨", // 第三日天气 // "weather4": "多云", // 第四日天气 // "weather5": "晴", // 第五日天气 // "weather6": "晴", // 第六日天气 // "img1": "1", // 天气图标编号，此处的编号及其图片获取规则尚不清楚，如有知道详情的恳请评论告知，我将添加说明 // "img2": "99", // 天气图标编号 // "img3": "0", // 天气图标编号 // "img4": "1", // 天气图标编号 // "img5": "4", // 天气图标编号 // "img6": "7", // 天气图标编号 // "img7": "1", // 天气图标编号 // "img8": "99", // 天气图标编号 // "img9": "0", // 天气图标编号 // "img10": "99", // 天气图标编号 // "img11": "0", // 天气图标编号 // "img12": "99", // 天气图标编号 // "img_single": "1", // ? 可能是天气图标编号 // "img_title1": "多云", // ? 可能是天气图标对应的 title // "img_title2": "多云", // ? 可能是天气图标对应的 title // "img_title3": "晴", // ? 可能是天气图标对应的 title // "img_title4": "多云", // ? 可能是天气图标对应的 title // "img_title5": "雷阵雨", // ? 可能是天气图标对应的 title // "img_title6": "小雨", // ? 可能是天气图标对应的 title // "img_title7": "多云", // ? 可能是天气图标对应的 title // "img_title8": "多云", // ? 可能是天气图标对应的 title // "img_title9": "晴", // ? 可能是天气图标对应的 title // "img_title10": "晴", // ? 可能是天气图标对应的 title // "img_title11": "晴", // ? 可能是天气图标对应的 title // "img_title12": "晴", // ? 可能是天气图标对应的 title // "img_title_single": "多云", // ? 可能是天气图标对应的 title // "wind1": "西南风小于3级转西风3-4级", // 今日风向风力信息 // "wind2": "西风小于3级转西南风3-4级", // 明日风向风力信息 // "wind3": "西南风小于3级转3-4级", // 第三日风向风力信息 // "wind4": "西南风小于3级转3-4级", // 第四日风向风力信息 // "wind5": "西南风小于3级转3-4级", // 第五日风向风力信息 // "wind6": "西南风小于3级转3-4级", // 第六日风向风力信息 // "fx1": "西南风", // ? // "fx2": "西风", // ? // "fl1": "小于3级转3-4级", // 今日风力信息 // "fl2": "小于3级转3-4级", // 明日风力信息 // "fl3": "小于3级转3-4级", // 第三日风力信息 // "fl4": "小于3级转3-4级", // 第四日风力信息 // "fl5": "小于3级转3-4级", // 第五日风力信息 // "fl6": "小于3级转3-4级", // 第六日风力信息 // "index": "热", // "index_d": "天气较热，建议着短裙、短裤、短套装、T恤等夏季服装。年老体弱者宜着长袖衬衫和单裤。", // "index48": "炎热", // "index48_d": "天气炎热，建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。", // "index_uv": "中等", // 紫外线信息 // "index48_uv": "弱", // 48 小时紫外线信息 // "index_xc": "较适宜", // 洗车指数 // "index_tr": "适宜", // 旅游指数 // "index_co": "舒适", // 舒适指数 // "st1": "25", // "st2": "17", // "st3": "28", // "st4": "19", // "st5": "18", // "st6": "16", // "index_cl": "较适宜", // 晨练指数 // "index_ls": "适宜", // 晾晒指数 // "index_ag": "极易发" // 感冒指数（感谢读者 刘睿 的提醒） // } //}
4.下面的地址可以查看城市的id
http://www.360doc.com/content/12/1102/09/4808208_245235392.shtml
