zoukankan      html  css  js  c++  java
  • 原生JS和jQuery分别使用jsonp来获取“当前天气信息”

    需掌握的技能点:

      jsonp、跨域相关等。

      以下两种代码,均可直接运行。

    1、使用原生JS:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <p id="cur_year"></p>
        <div id="iciba_ds"></div>
    </body>
    </html>
    <script type="text/javascript">
        document.getElementById("cur_year").innerHTML =new Date();
    
        function data(data){
            //遍历
            var description = "";
            for(var i in data.result){
                var property=data.result[i];
                description+=i+" = "+property+"<br />";
            }
            document.write(description);
        }
    </script>
    <script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=412&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data"></script>

    2、使用jquery:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    type          : 'get',
                    async         : false,
                    url           : 'http://api.k780.com/?app=weather.today&weaid=412&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data',
                    dataType      : 'jsonp',
                    jsonp         : 'callback',
                    jsonpCallback : 'data',
                    success       : function(data){
                        if(data.success!='1'){
                            alert(data.msgid+' '+data.msg);
                            exit;
                        }
                        //遍历
                        var description = "";
                        for(var i in data.result){
                            var property=data.result[i];
                            description+=i+" = "+property+"<br />";
                        }
                        document.write(description);
                    },
                    error:function(){
                        alert('fail');
                    }
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
  • 相关阅读:
    Buddy内存分配算法
    牛顿迭代法 求方程根
    卡特兰数(Catalan)
    【Python图像】给你的头像+1
    【Python网络爬虫二】使用urllib2抓去网页内容
    【Python网络爬虫一】爬虫原理和URL基本构成
    【Python基础学习六】函数
    【Python基础学习五】列表,元祖,字典
    Linux-文件和目录操作命令
    VMware中的Ubuntu网络设置
  • 原文地址:https://www.cnblogs.com/mycognos/p/9222306.html
Copyright © 2011-2022 走看看