第1篇——JSP作业3之使用Ajax发送和接收数据

JSP作业3之使用Ajax发送和接收数据

任务：利用中国天气网的公开接口，实现天气预报的查询功能
1.从js文件读取JSON数据
2.实现二级联动菜单
3.从服务器读取JSON数据

功能要求

1. 当网页加载时，根据所给的json数据解析获得省（直辖市）的信息并显示在下拉列表框中。
2. 当用户选择某个省（直辖市），在第二个下拉列表框中显示其从属的所有城市（地区）。
3. 当用户选择了某个城市（地区），查询最近15天的天气预报信息，并将其显示在下面的表格。

实现的效果图大致是这样：

提示信息

1. 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没有进行获取，直接使用了。

2. 二级联动菜单
   主要是利用表示省（直辖市）的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

3. 查询天气的请求链接形式为：
   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