JSP作业3之使用Ajax发送和接收数据
任务:利用中国天气网的公开接口,实现天气预报的查询功能
1.从js文件读取JSON数据
2.实现二级联动菜单
3.从服务器读取JSON数据
功能要求
- 当网页加载时,根据所给的json数据解析获得省(直辖市)的信息并显示在下拉列表框中。
- 当用户选择某个省(直辖市),在第二个下拉列表框中显示其从属的所有城市(地区)。
- 当用户选择了某个城市(地区),查询最近15天的天气预报信息,并将其显示在下面的表格。
实现的效果图大致是这样:
提示信息
- citydata.js文件中的JSON对象数组格式:
{
"_id": 1,
"id": 1,
"pid": 0,
"city_code": "101010100",
"city_name": "北京"
},
city_code是查询接口需要的参数(城市名称可能重复等),pid是所属省(直辖市)的id,pid=0表示该对象的数据是省(直辖市)。
本地js文件通过外部链接形式引入,js中的数组变量cityData可以在(进行操作的)js脚本块直接引用:
var html_str="";
$("#provSel").empty();
//$("#cities").empty();
$.each(cityData,function(i,item){
if(cityData[i].pid==0){
province=cityData[i].city_name;
html_str += " <option value='"+cityData[i]._id+"'> "+
cityData[i].city_name+"</option>";
}//if
});//each
each函数中的cityData没有进行获取,直接使用了。
- 二级联动菜单
主要是利用表示省(直辖市)的select标签的change事件。
$("#provinces").change(function(){
var index=$(this).val();//当前省的id
var html_s="";
$("#cities").empty();
$("#citySel").empty();
$("#provSel").empty();
for(var i=0;i<cityData.length;i++){
if(index==cityData[i].pid){
html_s += " <option value='"+cityData[i].city_code+"'> "+
cityData[i].city_name+"</option>";
}//if
}//each for
$("#cities").append(html_s);
$("#provSel").append(getText("#provinces"));//显示选中的省(直辖市)
$("#citySel").append(getText("#cities"));//显示选中的城市(地区)
});//change
- 查询天气的请求链接形式为:
http://t.weather.sojson.com/api/weather/city/101030100
此处的101030100是城市(地区)对应的city_code。获取
getValue("#cities")
function getValue(obj){
var val=$(obj).find("option:selected").val();
return val;
}
4.查询接口返回值形式
(1)参考链接:https://www.sojson.com/api/w