<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
margin:100px auto;
overflow:hidden;
}
input{
outline:none;
border:none;
height:30px;
float:left;
}
input[type=text]{
width:80%;
text-align:center;
}
input[type=button]{
width:20%;
color:#fff;
font:400 15px/30px "微软雅黑";
}
ul{
margin-top:35px;
}
ul,li{
list-style:none;
width:100%;
}
li{
background-color:#fff;
border-radius:5px;
margin-bottom:5px;
}
li>span{
display:block;
width:33.3333333%;
height:30px;
line-height:30px;
text-align:center;
float:left;
background:lightblue;
}
</style>
<title>天气预报</title>
</head>
<body bgcolor="#f3f4f5">
<div class="box">
<input type="text" placeholder="请输入你要查询的城市"/>
<input type="button" value="查询"/>
<ul>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
var $texts=$("input[type=text]");
var $btn=$("input[type=button]");
var str="";

$texts.on("focus",function(){
$texts.val("").css("color","#aaa");
});
$btn.on("click",function(){
str=$texts.val();
if(str.length>0){
str=encodeURIComponent(str);
$.ajax({
dataType:"jsonp",
type:"get",
url:"http://v.juhe.cn/weather/index?format=2&cityname="+str+"&key=9817f1436de8051a9b635799dcb63f27",
success:function(data){
var data = data.result.future;
console.log(data);
for(var i=0;i<data.length;i++){
var time="<span>"+data[i].date+"</span>";
var temperature="<span>"+data[i].temperature+"</span>";
var weather="<span>"+data[i].weather+"</span>";
var liS="<li>"+time+temperature+weather+"</li>";
$("ul").append(liS);
}
}
});
}else{
$texts.val("WRONG！").css("color","red");
}
});
})

</script>
</html>

结果是这样的：

用ajax查询天气的更多相关文章

  1. 【Python3爬虫】自动查询天气并实现语音播报

    一.写在前面 之前写过一篇用Python发送天气预报邮件的博客,但是因为要手动输入城市名称,还要打开邮箱才能知道天气情况,这也太麻烦了.于是乎,有了这一篇博客,这次我要做的就是用Python获取本机I ...

  2. 5月17 利用AJAX查询数据库

    利用AJAX查询数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  4. BAE+Python+Django+Wechatpy+Baidu weather api +微信订阅号 = 实现微信查询天气

    最近想在微信上面实现天气查询,分两个步骤: 1.被动回复:输入天气.xx天气获取天气情况 2.主动推送:每天定时推送天气(针对24小时内产生交互的人) 目前已经实现第一个步骤,如下: 现将实现此功能环 ...

  5. TP5结合聚合数据API查询天气

    php根据城市查询天气情况看到有人分享java的查询全国天气情况的代码,于是我想分享一个php版本的查询天气接口.免费查询天气的接口有很多,比如百度的apistore的天气api接口,我本来想采用这个 ...

  6. python 基础例子 双色球 查询天气 查询电话

    # 随机生成双色球import random# 随机数 1-16之间# r = random.randint(1,16)# print(r)phone_numbers_str = "匪警[1 ...

  7. python+tkinter+动画图片+爬虫（查询天气）的GUI图形界面设计

    1.完整代码: import time import urllib.request #发送网络请求,获取数据 import gzip #压缩和解压缩模块 import json #解析获得的数据 fr ...

  8. 通过Azure bot framework composer 设计一个AI对话机器人bot（查询天气）

    本文介绍通过机器人框架设计器 (Bot framework composer)接近拖拉拽的方式设计一个聊天机器人,该聊天机器人的主要功能是发起http请求查询天气.当然,稍微变通下,可以用来查询几乎任 ...

  9. 原生js实现查询天气的小应用

    demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的AP ...

随机推荐

  1. 原生Ajax总结

    HTTP协议 传统的请求和Ajax请求 Ajax定义 Asynchronous JavaScript and XML. Ajax异步的,JavaScript程序希望与服务器直接通信而不需要重新加载页面 ...

  2. Linux平台oracle 11g单实例 + ASM存储 安装部署 快速参考

    操作环境:Citrix虚拟化环境中申请一个Linux6.4主机(模板)目标:创建单机11g + ASM存储 数据库 1. 主机准备 2. 创建ORACLE 用户和组成员 3. 创建以下目录并赋予对应权 ...

  3. SQL Tuning 基础概述02 - Explain plan的使用

    1.explain plan的使用 SQL> explain plan for delete from t_jingyu; Explained. SQL> select * from ta ...

  4. 利用Python进行数据分析(15) pandas基础: 字符串操作

      字符串对象方法 split()方法拆分字符串: strip()方法去掉空白符和换行符: split()结合strip()使用: "+"符号可以将多个字符串连接起来: join( ...

  5. CatchPacket网络抓包软件

    CatchPacket网络抓包软件  qq  22945088431.技术特点:基于WinPcap库,c# winform2.实现获取机器所有网卡,可任意选择监听3.可以捕获常见网络协议arp dns ...

  6. Devexpress Ribbon Add Logo

    一直在网上找类似的效果.在Devpexress控件里面的这个是一个Demo的.没法查看源代码.也不知道怎么写的.所以就在网上搜索了半天的. 终于找到类似的解决办法. 可以使用重绘制的办法的来解决. [ ...

  7. C#开发微信门户及应用(2)--微信消息的处理和应答

    微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微 ...

  8. java.net.SocketException: Connection reset

    java.net.SocketException: Connection reset at java.net.SocketInputStream.read(SocketInputStream.java ...

  9. entityframework学习笔记--006-表拆分与实体拆分

    1.1 拆分实体到多张表 假设你有如下表,如图6-1.Product表用于存储商品的字符类信息,ProductWebInfo用于存储商品的图片,两张表通过SKU关联.现在你想把两张表的信息整合到一个实 ...

  10. AJAX表单提交以及数据接收

    ajax是一种传输方式,数据不是提交给ajax,而是 数据 由 ajax提交到后台(并不刷新页面) 要实现一个简单的ajax请求,要这3样东西,一个html页,一段js代码,一个可以响应请求的后台 这 ...