实现跨域script原始方式，代码实例

天气查询网页应用

最新推荐文章于 2025-09-09 22:18:29 发布

原创最新推荐文章于 2025-09-09 22:18:29 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的天气查询网页应用实现方案，使用HTML、jQuery及AJAX技术从服务器获取指定城市的天气信息，并通过DOM操作实时更新展示天气数据。该应用包括城市选择下拉框和查询按钮，点击查询后会显示未来几天的天气预报。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>weather search</title>
</head>
<body>
<div id="box">
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101030100">天津</option>
<option value="重庆">重庆</option>
<option value="哈尔滨">哈尔滨</option>
</select>
<input type="button" value="查询" id="btn" />
</div>
<div id="content"></div>
</body>
</html>

<script src="jquery-1.11.2.js"></script>

function callback(data){
console.log(data);
var d = data.weather;
var tag = '';
for(var i=0;i<d.length;i++){
var that = d[i];
var date = that.date;
var day = that.info.day;
var night = that.info.night;
//console.log(day[1]);
tag +='<span>'+date+'</span>';
tag +='<p>白天天气情况</p><ul><li>天气情况：'+day[1]+'</li>';
tag +='<li>温度情况：'+day[2]+'</li>';
tag +='<li>风向：'+day[3]+'</li>';
tag +='<li>风级：'+day[4]+'</li></ul>';

tag +='<p>夜里天气情况</p><ul><li>天气情况：'+night[1]+'</li>';
tag +='<li>温度情况：'+night[2]+'</li>';
tag +='<li>风向：'+night[3]+'</li>';
tag +='<li>风级：'+night[4]+'</li></ul>';
}

$("#content").html(tag);
}

$(function(){

$("#btn").click(function(){
$("#content").text("");
var cityCode = $("#city").val();
url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=callback&code='+cityCode;
var script = document.createElement("script");
script.src = url;
$("body").append(script);