<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>天气预报</title>

    <style>

        table {

            margin-top: 20px;

            width: 600px;

            border-collapse: collapse;

        }

        td,th{

            height: 50px;

            text-align: center;

            border: 1px solid #CCC;

        }

    </style>

</head>

<body>

<input type="text" id="city"/> <a href="javascript:;" id="search">天气查询</a>

<table>

    <thead>

    <tr>

        <th>日期</th>

        <th>白天</th>

        <th>晚上</th>

        <th>温度</th>

        <th>天气</th>

        <th>风力</th>

    </tr>

    </thead>

    <tbody>

    </tbody>

</table>

<script type="text/template" id="template">

    <%for(var i = 0 ; i < model.length ; i++){%>

        <tr>

            <td><%=model[i].date%></td>

            <td><img src="<%=model[i].dayPictureUrl%>" alt=""/></td>

            <td><img src="<%=model[i].nightPictureUrl%>" alt=""/></td>

            <td><%=model[i].temperature%></td>

            <td><%=model[i].weather%></td>

            <td><%=model[i].wind%></td>

        </tr>

    <%};%>

</script>

<script src="./js/jquery.min.js"></script>

<script src="./js/template-native.js"></script>

<script>

    $(function(){

        /*

        * 1.输入城市名

        * 2，点击的时候发送请求

        * 3.响应成功渲染页面

        * */

        $('#search').on('click',function(){

            var city = $('#city').val()||'北京';

            $.ajax({

                type:'get',

                url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',

                data:{location:city},

                dataType:'jsonp',

                success:function(data){

                    var weather_data = data.results[0].weather_data;

                    var html = template('template',{model:weather_data});

                    $('tbody').html(html);

                }

            });

        });

    });

</script>

</body>

</html>

javascript中天气接口案例的更多相关文章

  1. 【总结】浅谈JavaScript中的接口

    一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...

  2. 面向对象在JavaScript中的接口实现

    接口是面向对象编程的基础.它是一组包括了函数型方法的数据结构,与类一样.都是编程语言中比較抽象的概念.比方生活中的接口.机顶盒.人们利用它来实现收看不同频道和信号的节目,它宛如对不同类型的信息进行集合 ...

  3. javascript中菜单栏切换案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JAVAFX 2.0 javascript中调用java代码

    现在你已经知道如何在JavaFX中调用JavaScript.在本章中,你将了解到相反的功能——在web页面中调用JavaFX. 大体上的理念是在JavaFX程序中创建一个接口对象,并通过调用JSObj ...

  5. 『JavaScript』模仿接口

    JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...

  6. JavaScript 中常见设计模式整理

    开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式.本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知. JavaScript 中常见设计模 ...

  7. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  8. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  9. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

随机推荐

  1. Bootstrap 模态框（Modal）带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...

  2. mysql的安装和下载

    1.MySQL下载后的文件名为:mysql_installer_community_V5.6.21.1_setup.1418020972.msi,示意图如下:  mysql下载地址: 链接:https ...

  3. centos最小化系统安装VMware tool

    1.先执行命令创建环境 yum -y install update yum -y install gcc kernel-headers kernel-devel 2.然后重启reboot 3.挂载,解 ...

  4. 单例模式的理解【php】

    单例模式(Singleton Pattern):顾名思义,就是只有一个实例.作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 为什么要使用单例模式 1.P ...

  5. 数位dp题集

    题集见大佬博客 不要62 入门题,检验刚才自己有没有看懂 注意一些细节. 的确挺套路的 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...

  6. GOF23设计模式之适配器模式

    GOF23设计模式之适配器模式 结构型模式: 核心作用:是从程序的结构上实现松耦合,从而可以扩大整体的类结构,用来解决更大的问题. 分类:适配器模式.代理模式.桥接模式.装饰模式.组合模式.外观模式. ...

  7. 05springMVC数据格式化

    数据格式化简介 内建的格式转换器 使用内建格式转换器示例 字段级别的解析/格式化 集成到Spring Web MVC环境 1      数据格式化简介 对属性对象的输入/输出进行格式化,其实是属于“类 ...

  8. uva 10479(找规律+递归)

    题意:有一个初始序列第一个数字是0. 规律是把前一次推出来的每个数字x.先接x个0,然后接x+1. 0 –> 1 –> 02 –> 1003 –> 02110004 那么这个序 ...

  9. Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  10. 能够在子线程绘画的View SurfaceView

    转载请注明出处:王亟亟的大牛之路 近期两天都没有写文章,一方面是自己在看书.一方面不知道写什么,本来昨天想写Glide或者RxAndroid的东西结果公司的"狗屎"网怎么都刷不好G ...