1. 前言

在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题可以使用jsonp技术

2.代码

<!DOCTYPE html>

<html>

<head>

    <title>weatherSample</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        //init, default: XiaMen

        getWeatherInfo();

        $("#cityName").text("城市: 厦门");

        var tableHeaderData = $('table').parent().html();

        function getWeatherInfo(){

            $.ajax({

                type : "get",

                async: false,

                url : "http://api.map.baidu.com/telematics/v3/weather?output=json&ak=6tYzTvGZSOpYB5Oc2YGGOKt8",

                data:{

                    location:$("#city").val()||"厦门"

                },

                dataType: "jsonp",

                jsonp:"callback", //请求php的参数名

                jsonpCallback: "jsonhandle",//要执行的回调函数

                success : function(data) {

                   if(data.status == 'success'){

                       $('#tip').html("");

                       var list =  data.results;

                       var weatherDataArr = list[0].weather_data;

                       var items = "";

                       //init table of weatherInfo, just stay header data

                       $('table').html(tableHeaderData);

                       for(var i=0 ; i< weatherDataArr.length ;i++){

                         var date = weatherDataArr[i].date;

                         var dayPictureUrl = weatherDataArr[i].dayPictureUrl;

                         var nightPictureUrl = weatherDataArr[i].nightPictureUrl;

                         var temperature = weatherDataArr[i].temperature;

                         var weather = weatherDataArr[i].weather;

                         var wind = weatherDataArr[i].wind;

                         var item = "<tr><td>"+date+"</td>"

                                  + "<td><img src='"+dayPictureUrl+"'/></td>"

                                  + "<td><img src='"+nightPictureUrl+"'/></td>"

                                  + "<td>"+temperature+"</td>"

                                  + "<td>"+weather+"</td>"

                                  + "<td>"+wind+"</td>"

                                  + "</tr>";

                         items+=item;

                       }

                        $('table tr').after(items);

                   }

               },

               error:function(data){

                //获取失败,打印出原因

                  $('#tip').html(`error reason=>{"status":220,"message":"APP Referer校验失败"}`)

                }

            });

        }

        $("button").click(function(){

            getWeatherInfo();

        })

        $("input").change(function(){

            $("#cityName").text("城市: " + $('#city').val());

        }) 

    });

</script>

</head>

<body>

<div  style="margin-bottom:10px">

    <input type="text" id="city" name="city"/>

    <button style="margin-left:10px">天气查询</button>

</div>

<div id="cityName" style="margin-bottom:10px">城市: </div>

<div>

    <table border="1px">

        <tr>

            <th>日期</th>

            <th>白天</th>

            <th>晚上</th>

            <th>温度</th>

            <th>天气</th>

            <th>风力</th>

        </tr>

    </table>

</div>

<div id="tip" style="margin-bottom:10px"></div>

</body>

</html>

注：请求ak已失效

3.功能与效果

3.1 功能

首次加载，默认是厦门的天气预报，输入城市名并点击天气查询按钮则获取该天气的天气预报

3.2 效果图

4.说明

向百度天气服务器发送请求的参数是：output=json&ak=6tYzTvGZSOpYB5Oc2YGGOKt8&callback=jsonhandle&location=%E5%8E%A6%E9%97%A8&_=1507712014958， %E5%8E%A6%E9%97%A8是厦门的utf-8编码加%组成，好奇宝宝点这里

ajax返回来的data如下:

5.参考

1.深入理解jsonp跨域请求原理

2.简单透彻理解JSONP原理及使用（讲得很通俗易懂）

　

通用jsonp跨域技术获取天气数据的更多相关文章

  1. JSONP 跨域请求 - 获取JSON数据

    如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...

  2. 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...

  3. JSONP跨域jQuery处理整理（附天气数据实例）

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  4. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

  5. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  6. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  7. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  8. jsonp跨域 封装通用方法

    jsonp跨域 封装通用方法 //用法如下 jsonp({ url:"https://www.xxxx.com", params:{wd:'b'}, callback:'show' ...

  9. jsonp原生js跨域拿新浪数据插件封装【可扩展】

    //修改了一个bug,增加了手动释放垃圾 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. A1080. Graduate Admission

    It is said that in 2013, there were about 100 graduate schools ready to proceed over 40,000 applicat ...

  2. ReactNative系列组件用法(一)

    首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...

  3. #ifndef HeaderName_h #define HeaderName_h #endif 使用详解

    想必很多人都看到过头文件中写有:#ifndef HeaderName_h                                                #define HeaderNa ...

  4. You are using safe update mode and you tried to update a table--mysql

    SET SQL_SAFE_UPDATES = 0;delete from cms_article_data where id in(SELECT id FROM jeesite.cms_article ...

  5. NFS无法启动解决方式

    今天一台挂载nfs磁盘的服务器出现异常,数据不能写入,执行 df -h 卡住不动. 登录nfs server查看发现nfs为启动. [root@server10-13 web]# exportfs [ ...

  6. 金融量化分析【day113】：PGEC策略

    一.PGE简介 二.PGE代码 # 导入函数库 import jqdata import pandas as pd def initialize(context): set_benchmark('00 ...

  7. Hbase记录-client访问zookeeper大量断开以及参数调优分析（转载）

    1.hbase client配置参数 超时时间.重试次数.重试时间间隔的配置也比较重要,因为默认的配置的值都较大,如果出现hbase集群或者RegionServer以及ZK关掉,则对应用程序是灾难性的 ...

  8. Hive记录-hive权限控制

    在使用Hive的元数据配置权限之前必须现在hive-site.xml中配置两个参数,配置参数如下: <property> <name>hive.security.authori ...

  9. MyBatisPlus环境下使用MyBatis的配置类

    通过@Configuration使用MyBatis配置类的资料比较少,大部分都是通过XML的形式.找了好久,最终还是通过官方的文档找到了解决方法:http://www.mybatis.org/spri ...

  10. SpringMVC学习笔记_01

    1.JAVAEE体系结构 JAVAEE体系结构图如下所示: 2.什么是springmvc? 什么是mvc? Model1 Model2 SpringMVC是什么? SpringMVC是一个web层mv ...