h-ui天气预报HTML页面代码,天气预报API_02

天气预报API_02_前端页面

页面显示如下：

天气预报.png

其中天气预报显示的html代码：

天气预报

#container {

width: 500px;

min-height: 300px;

padding: 10px;

}

#info {

height: 200px;

padding: 10px;

background:#adacac;

}

//javascript

$(document).ready(function(){

$("#btn").click(function(){

var city = $("#city").val();

$.ajax({

type:"get",

//后端处理数据的cgi脚本

url:"/cgi-bin/citycode.cgi",

//加在url后面的城市名字，?cityName=北京

data:{cityName:city},

//后端返回的数据格式

dataType:"json",

success:function(data){

//console.log(data.date);

//console.log(data.temperature);

//console.log(data.weather);

//console.log(data.direct);

var tag =

城市：'+ city +'

+ '

日期：'+ data.date +'

+ '

温度：'+ data.temperature + '

+ '

天气：'+ data.weather + '

+ '

风向：'+ data.direct + '

// + data.temperature + data.weather + data.direct ;

//$("#cityName").text(city);

//console.log(tag);

$("#info").html(tag);

}

});

})

城市：

输入城市名称，点击查询获取天气数据

通过citycode.cgi将城市名称传入到上一节中的weather程序中：

#!/bin/sh

echo "Conten-type:text/html;Cache-Control:no-cache;charset=utf-8\\n\\r\\n\\r"

city=`echo $QUERY_STRING |awk -F '[=]' '{print $2}'`

./weather $city

再简单修改weather.c的代码，处理参数获取天气数据，以json格式输出即可。

h-ui天气预报HTML页面代码,天气预报API_02_前端页面相关推荐

php自动关闭页面代码,自动生成伪静态页面代码（简易版）
在你的动态php页面最顶端放置代码:<?php ob_start(); ?> 然后在页面最底部放置代码:<?php $info = ob_get_contents(); $file ...
vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
前端页面的搭建首先我们在resources包下新建一个文件夹static,SpringBoot默认会去把static包下的文件做一个路由然后在static包下新建一个HTML File类型的文件, ...
angular跳转指定页面_angular怎么做前端页面跳转？
Angular中每个页面的显示都需要三个要素:页面的代码,控制器和页面的URL;当要在同一个页面上呈现不同的视图时,这就需要配置路由啦;angular.js已经为我们封装了一个独立的路由工具ng-ro ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
php 更新页面代码,php – 自动更新页面的代码大纲
我想搞乱实时信息,我想复制一个非常标准的功能: 当你在一个单一问题视图上,输入你的答案时会出现在这里,并且会弹出一个警告,上面写着"有3个新闻答案,点击显示" 它也出现在Twitt ...
14W 行代码量的前端页面长什么样
作者:sigmaliu,腾讯文档 AlloyTeam 开发工程师 0. 前言腾讯文档列表页在不久前经历了一次完全重构后,首屏速度其实已经是不错.但是我们仍然可以引入 SSR 来进一步加快速度.这篇文 ...
html收藏页面代码,我的收藏页面.html
我的收藏页面 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif' ...
java页面代码下载_java 下载页面代码
String fileName=""; String filePath = "d://max//";//下载文件目录,可以在配置文件中读取 if (reques ...

h-ui天气预报HTML页面代码,天气预报API_02_前端页面

h-ui天气预报HTML页面代码,天气预报API_02_前端页面相关推荐

最新文章

热门文章