使用mui读取json信息——天气预报功能

最新推荐文章于 2024-04-04 09:33:08 发布

zh3210576

最新推荐文章于 2024-04-04 09:33:08 发布

阅读量865

点赞数

分类专栏： mui 文章标签： json

本文链接：https://blog.csdn.net/zh3210576/article/details/121602981

版权

mui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用mui读取json信息——天气预报功能

很多语言都可以解析JSON语句，获取需要的信息，mui也是如此。mui本身提供了2个方法：
JSON.stringify()用于一个对象解析出字符串
JSON.parse()用于从一个字符串中解析出JSON对象
以下案例为从网络url获取的json信息，该json只支持国内的主要城市（毕竟白嫖的）
南京市的信息
json语句

1.mui显示效果

文本框中输入城市名称后点击按钮，可以显示出当前温度及近5天的天气信息
在这里插入图片描述

2.实现代码

以下代码只涉及到简单的js

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			.mui-input-row{
				margin: 10px;
			}
			.mui-input-row input{
				width: 70%;
			}
			.mui-input-row .mui-btn{
				width: 25%;
				line-height: 1.3;
			}
			html,body{
				background-color: #EFEFF4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-input-row">
				<input type="text" placeholder="请 输 入 国 内 城 市 名 称" id="inputCityName"/>
				<button type="button" class="mui-btn mui-btn-primary" id="searchWeather">查询天气</button>
			</div>
			<div align="center" style="padding: 10px 0px;">
				<p>当前温度</p>
				<h1 id="wendu">暂无数据</h1>
			</div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" name="date">暂无数据</a>
						<div class="mui-collapse-content">
							<div>
								<p name="low">最低温度：暂无数据</p>
								<p name="high">最高温度：暂无数据</p>
								<p name="type">天气情况：暂无数据</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" name="date">暂无数据</a>
						<div class="mui-collapse-content">
							<div>
								<p name="low">最低温度：暂无数据</p>
								<p name="high">最高温度：暂无数据</p>
								<p name="type">天气情况：暂无数据</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" name="date">暂无数据</a>
						<div class="mui-collapse-content">
							<div>
								<p name="low">最低温度：暂无数据</p>
								<p name="high">最高温度：暂无数据</p>
								<p name="type">天气情况：暂无数据</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" name="date">暂无数据</a>
						<div class="mui-collapse-content">
							<div>
								<p name="low">最低温度：暂无数据</p>
								<p name="high">最高温度：暂无数据</p>
								<p name="type">天气情况：暂无数据</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" name="date">暂无数据</a>
						<div class="mui-collapse-content">
							<div>
								<p name="low">最低温度：暂无数据</p>
								<p name="high">最高温度：暂无数据</p>
								<p name="type">天气情况：暂无数据</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div style="margin-left: 10px;">
				<span id="ganmao">tip：暂无数据</span> 
			</div>
			<div class="mui-input-row">
				<a href="content.html">
					<button class="mui-btn mui-btn-danger" style="margin-top: 50px;">返 回</button>
				</a>
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById("searchWeather").addEventListener("tap",function(){
				var city = document.getElementById("inputCityName").value;
				//js中判断字符串时使用==，java中为equals
				if(city==""){
					alert("请填写城市名称后再查询！");
				}else{
					mui.getJSON("http://wthrcdn.etouch.cn/weather_mini?city="+city,{},success);
				}
			});
			var success = function(response){
				//wendu为当前温度，只有一个值，因此设置为id；其余属性每一天都有，用name指向
				//getElementsByName遍历到的页面元素，以数组的形式存在
				var date = document.getElementsByName("date");
				var low = document.getElementsByName("low");
				var high = document.getElementsByName("high");
				var type = document.getElementsByName("type");
				var wendu = document.getElementById("wendu");
				var ganmao = document.getElementById("ganmao");
				//mui中提供JSON解析的方法有2个，JSON.stringify()用于一个对象解析出字符串
				//JSON.parse()用于从一个字符串中解析出JSON对象
				if(JSON.stringify(response.status)==1002){
				//1002状态码为错误地名的返回语句
					alert("您输入的城市名称有误");
					return;
				}else{
					wendu.innerHTML = JSON.stringify(response.data.wendu).substring(1,JSON.stringify(response.data.wendu).length-1)+" ℃";
					ganmao.innerHTML = "tip："+JSON.stringify(response.data.ganmao).substring(1,JSON.stringify(response.data.ganmao).length-1);
					for(var i=0;i<date.length;i++){
						var json_date = JSON.stringify(response.data.forecast[i].date);
						date[i].innerHTML = json_date.substring(1,json_date.length-1);
						var json_low = JSON.stringify(response.data.forecast[i].low);
						low[i].innerHTML = "最低温度："+json_low.substring(3,json_low.length-1);
						var json_high = JSON.stringify(response.data.forecast[i].high);
						high[i].innerHTML = "最高温度："+json_high.substring(3,json_high.length-1);
						var json_type = JSON.stringify(response.data.forecast[i].type);
						type[i].innerHTML = "天气情况："+json_type.substring(1,json_type.length-1);
					}
				}
			}
		</script>
	</body>

</html>

zh3210576

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用mui读取json信息——天气预报功能

使用mui读取json信息——天气预报功能很多语言都可以解析JSON语句，获取需要的信息，mui也是如此。mui本身提供了2个方法：JSON.stringify()用于一个对象解析出字符串JSON.parse()用于从一个字符串中解析出JSON对象以下案例为从网络url获取的json信息，该json只支持国内的主要城市（毕竟白嫖的）南京市的信息1.mui显示效果文本框中输入城市名称后点击按钮，可以显示出当前温度及近5天的天气信息2.实现代码以下代码只涉及到简单的js<!doct
复制链接

扫一扫