代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
});
/*----------Jquery事件--------------*/
$(document).ready(function(){
$("button").click(function(){
var city=$("#city").val();
/*-----------------------------------begin--------------------------------*/
/*------说明:通过ajax获取远程服务器(url:http://wthrcdn.etouch.cn/weather_mini?city=)天气信息(json数据),解析获取的字条串,
转化成为对象,获取forecast数组,调用addBox()函数---------*/
$.ajax({
type: "GET", //请求方式
url: "http://wthrcdn.etouch.cn/weather_mini?city="+city,//url地址,就是json文件的路径
dataType: "json", //数据类型,可以是 text xml json script jsonp
success: function(result){ //result是响应信息返回的结果,此处包含了返回的json对象
addBox(result.data.forecast); //调用addBox函数,将result数据添加到box容器中
}
});
});
});
function addBox(result) {
$.each(result, function(index, obj) {
$("#box").append("<div'>" +
"<p>" + obj['date'] + "</p>" +
"<p>" + obj['high'] + "</p>" +
"<p>" + obj['fengli'] + "</p>" +
"<p>" + obj['low'] + "</p>" +
"<p>" + obj['fengxiang'] + "</p>" +
"<p>" + obj['type'] + "</p>" +
"</div>");
});
}
</script>
</head>
<body>
<div> <h1>请输入城市</h1>
城市:<input type="text" id="city"/>
<br />
<button type="button">提交</button>
</div>
<div id="box"></div>
</body>
</html>
运行结果如下: