AJAX+PHP获取天气预报API案例

AJAX+PHP获取天气预报API案例

PHP代码获取API代码:
<?php
//声明utf-8编码头文件
header('Content-type:text/html;charset=utf-8');

$tou = file_get_contents("http://f.yohall.com/apics-tq.html?city=" . $_GET['city']);

$arr = json_decode($tou, true);      // JSON数据转PHP数组(true)

echo json_encode($arr);  /* 以 JSON 字符串类型输出 */ 
Js代码如下:
 // 使用原生AJAX 利于封装 调取信息;
var xhr;

function show(url, crl) {

	xhr = new XMLHttpRequest();

	xhr.onreadystatechange = crl;

	xhr.open("get", url);

	xhr.send();

}

add();  /* 设置默认加载*/


function add() {

	val = document.getElementById("xl").value;
    // 获取 select下拉菜单的值;

	show("./new.php?city=" + val, function () {

	if (xhr.readyState !== 4) return

	data = xhr.responseText;

	eval("var obj=" + data);

	day = obj.results[0].weather_data;

	$("#img").attr("src", day[0].dayPictureUrl);

// 下面 可以输出视图作为参考 无意义!

	$(".wd").text(day[0].temperature);
	$(".wd_1").text(day[1].temperature);
	$(".wd_2").text(day[2].temperature);
	$(".wd_3").text(day[3].temperature);
	$(".wet").text(day[0].weather);
	$(".weat_1").text(day[1].weather);
	$(".weat_2").text(day[2].weather);
	$(".weat_3").text(day[3].weather);
	$(".city").text(obj.results[0].currentCity);
	$(".pm").html("pm2.5:" + obj.results[0].pm25);
	$(".win").text(day[0].wind);
	$(".date").text(day[0].date);
	$(".day_1").text(day[1].date);
	$(".day_2").text(day[2].date);
	$(".day_3").text(day[3].date);

})

}
//  给select绑定 change改变事件,调取add函数执行onreadystatechange;
document.getElementById("xl").addEventListener("change", add);

案例样式:

目前只开放了三个城市,可以作为参考,望热心网友提出宝贵意见
链接:https://www.cwenz.cn/mini/tianqi/new.html
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值