<!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. Python-通过configparser读写配置文件

    Python读写配置文件: 1.创建配置文件(文件名以.conf或.ini结束的文件表示配置文件) 2.导入所需模块 OS, configparser >>> import os & ...

  2. Swiper 3D flow轮播使用方法

    swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...

  3. linux配置 yum 源

    使用 yum 命令安装软件包需要一个yum仓库(即yum源),yum通过客户端(yum命令本身即是yum客户端)去连接yum源服务器,CentOS默认yum源为官方的 http://mirrorlis ...

  4. The remote certificate is invalid according to the validation procedure 远程证书验证无效

    The remote certificate is invalid according to the validation procedure   根据验证过程中远程证书无效 I'm calling ...

  5. vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中

    效果图 1.html <div> <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave= ...

  6. 【剑指Offer】28、数组中出现次数超过一半的数字

      题目描述:   数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.   例如:输入如下所示的一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过 ...

  7. [转载]ext4文件系统的delalloc选项造成单次写延迟增加的分析

    转载http://www.cnblogs.com/cobbliu/p/5603472.html 最近我们的服务进程遇到kill -15后处于Z的状态,变为了僵尸进程,经过/proc/{thread_i ...

  8. jQuery升级踩坑之路

    1.使用了被废弃的jQuery.browser属性 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更 ...

  9. 自学python 第三天

    #!/usr/bin/env python# -*- coding:utf-8 -*- # name = "***"# if "*" in name:# pri ...

  10. Spring Boot-properties使用(二)

    自定义属性 @value注入 在application.properties新增配置 student.name=小明student.age=12student.info=${student.name} ...