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