<!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. 用了那么多项目管理工具，还是CORNERSTONE这款最好用

    在与软件开发有关的项目,往往会出现很难管理情况.许多事情都需提前计划.控制与管理,所以许多项目经理很容易迷失在计划的过程中.幸运的是,市场上提供了各种各样的项目管理工具.但不幸的是,工具实在是太多了. ...

  2. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  3. spring IOC 装配一个bean

    1.0属性注入 新建一个people类 package com.java.test3; /** * @author nidegui * @create 2019-06-22 14:45 */ publ ...

  4. JavaScript中Null和Undefined的区别

    Null: null是js中的关键字,表示空值,null可以看作是object的一个特殊的值,如果一个object值为空,表示这个对象不是有效对象. Undefined: undefined不是js中 ...

  5. python tips:小整数对象池与字符串intern

    本文为is同一性运算符的详细解释.is用于判断两个对象是否为同一个对象,具体来说是两个对象在内存中的位置是否相同. python为了提高效率,节省内存,在实现上大量使用了缓冲池技术和字符串intern ...

  6. 【Shell编程】Shell基本语法

    Shell 语法   Shell程序设计作为一种脚本语言,在Linux系统中有广泛的应用,本文记录了关于Shell程序设计的基础语法知识和常用命令,方便查询,熟练使用shell也需要经常实践,这对于完 ...

  7. 15.5.3 【Task实现细节】状态机的结构

    状态机的整体结构非常简单.它总是使用显式接口实现,以实现.NET 4.5引入的 IAsync StateMachine 接口,并且只包含该接口声明的两个方法,即 MoveNext 和 SetState ...

  8. Golang - 处理字符串

    目录 Golang - 处理字符串 1. 字符串操作 2. 字符串转换 Golang - 处理字符串 1. 字符串操作 func Contains(s, substr string) bool 字符串 ...

  9. centos 7.2 安装php56-xml

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  10. Photoshop教程

    Photoshop百科 Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件. Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图 ...