当前位置: 首页 > news >正文

原生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>

 

转载于:https://www.cnblogs.com/mycognos/p/9222306.html

相关文章:

  • iOS逆向工程理论篇续
  • [区块链] 拜占庭将军问题 [BFT]
  • 记一次通过c#运用GraphQL调用Github api
  • vue中嵌套页面(iframe)
  • nodejs+mongoose+blog
  • mysql查询两个日期之间相差多少天?
  • 数字货币交易界面数字格式化
  • mybitis懒加载Could not write JSON:No serializer...
  • srand rand
  • 简析gRPC client 连接管理
  • Java应用性能调优
  • BOM和DOM
  • Linux top命令的用法详细详解
  • StringUtils中常用方法leftPad(),rightPad(),center()
  • docker的持久化存储和共享存储和网络架构
  • angular学习第一篇-----环境搭建
  • ECMAScript6(0):ES6简明参考手册
  • javascript从右向左截取指定位数字符的3种方法
  • Java比较器对数组,集合排序
  • mac修复ab及siege安装
  • MobX
  • Rancher-k8s加速安装文档
  • spark本地环境的搭建到运行第一个spark程序
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 第13期 DApp 榜单 :来,吃我这波安利
  • 机器学习中为什么要做归一化normalization
  • 将回调地狱按在地上摩擦的Promise
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 利用DataURL技术在网页上显示图片
  • 使用权重正则化较少模型过拟合
  • 优化 Vue 项目编译文件大小
  • 智能合约Solidity教程-事件和日志(一)
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • 我们雇佣了一只大猴子...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • #pragma once与条件编译
  • #预处理和函数的对比以及条件编译
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (第一天)包装对象、作用域、创建对象
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (推荐)叮当——中文语音对话机器人
  • (转) ns2/nam与nam实现相关的文件
  • (转)Scala的“=”符号简介
  • (转)创业家杂志:UCWEB天使第一步
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • ******IT公司面试题汇总+优秀技术博客汇总
  • .CSS-hover 的解释
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(二)...