<!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. vue使用插槽分发内容slot的用法

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

  2. 移动端APP UI规范

  3. 深入了解Spring Boot 核心注解原理

    SpringBoot目前是如火如荼,所以今天就跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到 ...

  4. Ubuntu下解压(unzip)乱码的解决方法

    在Windows上压缩的文件,是以Windows系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 通过unzip -- ...

  5. PAT_A1145#Hashing - Average Search Time

    Source: PAT A1145 Hashing - Average Search Time (25 分) Description: The task of this problem is simp ...

  6. Java 并行 (2): Monitor

    转自:http://www.cnblogs.com/tomsheep/archive/2010/06/09/1754419.html 1. 什么是Monitor? Monitor其实是一种同步工具,也 ...

  7. C#那20道题

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 洛谷P1478 陶陶摘苹果（升级版）【水题】

    又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力气只剩下s ...

  9. Golang Gin实践 番外 请入门 Makefile

    Golang Gin实践 番外 请入门 Makefile 原文地址:Golang Gin实践 番外 请入门 Makefile 前言 含一定复杂度的软件工程,基本上都是先编译 A,再依赖 B,再编译 C ...

  10. mysql如何删除数据库指定ID段的数据库。比如删除id 1-500的数据。

    delete from tablename where id>=1 and id<=500或者DELETE FROM `数据库名称`.`数据表名称` WHERE `house_cs`.`i ...