<!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. 【转载】java实现HTTP请求的三种方式

    目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...

  2. 解决postman https请求无返回数据的问题

    1.点击右上角的扳手图标 2.点击settings 3.点击general 4.把 ssl certificate verification这项点击关闭

  3. python mysql连接池

    话不多说,直接撸代码 # coding=utf-8 from DBUtils.PooledDB import PooledDB import pymysql as mysql import trace ...

  4. Python——Numpy基础知识（一）

    一.Numpy的引入 1.标准的Python 中用列表(list)保存一组值,可以当作数组使用.但由于列表的元素可以是任何对象,因此列表中保存的是对象的指针.对于数值运算来说,这种结构显然比较浪费内存 ...

  5. [luogu4026 SHOI2008]循环的债务 (DP)

    传送门 吐槽洛谷难度标签qwq Solution 显然是一道神奇的DP,由于总钱数不变,我们只需要枚举前两个人的钱数就可知第三个人的钱数 DP的时候先枚举只用前k个币种,然后枚举前两个人的钱数,然后枚 ...

  6. 42.query string分词

    主要知识点: 1.queery string 分词 2.38节中搜索结果解析 3,测试分词器     一.query string分词 query string必须以和index建立时相同的analy ...

  7. 15.id生成的两种方式

  8. 关于使用element中的popup问题

    高产似母猪..写完上篇看了几集新番就空虚了..零点时分决定爬起来,趁着清明假期能写多写点. 1.前言 我们知道弹出框都是在触发了某种条件后展示,而一个个的新的弹出框的展示,总是覆盖着上一个弹出框.实现 ...

  9. 利用echarts做图表统计

    以项目中的扇形统计图为例: 首先,第一步: 引入外部echarts.js文件 其次,第二步: HTML代码块 <div class="count-body-con count-tj&q ...

  10. （31）Spring Boot导入XML配置【从零开始学Spring Boot】

    [来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论: 您的认可是我最大的动力,感谢您的支持] Spring Boot理念就是零配置编程,但是如果绝对需要使用XML的配置,我们建议您仍旧从一个@Co ...