@TOC

JavaWeb天气预报实时查询系统

本系统简单的实现了基于www.webxml.com.cn/天气网站的未来5天的实…

实现功能截图

系统功能

本天气预报系统实现了以下功能： 1、全国各省市的数据展示 2、今天天气情况展示 3、未来5天目标城市的天气情况

使用技术

数据库：无（存储使用了XML） 开发工具：Eclipse（Myeclispe、Idea也可以） 知识点：servlet、jsp、XML

系统采用了数据与业务逻辑分离，代码结构清晰 

代码

实体类： City.java

package com.yk.entity;

import java.io.Serializable;

public class City implements Serializable {
	
	private String id;
	private String name;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "City [id=" + id + ", name=" + name + "]";
	}
	
	

}

复制代码

Province.java

package com.yk.entity;

import java.io.Serializable;

public class Province implements Serializable {

	private String id;
	private String name;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "Province [id=" + id + ", name=" + name + "]";
	}
	
	
	
	
}

复制代码

WeatherInfo.java

package com.yk.entity;

public class WeatherInfo {

	private String str1;
	private String str2;
	private String str3;
	private String str4;
	private String str5;
	private String str6;
	private String str7;
	private String str8;
	private String str9;
	private String str10;
	private String str11;
	private String str12;
	private String str13;
	private String str14;
	private String str15;
	private String str16;
	private String str17;
	private String str18;
	private String str19;
	private String str20;
	private String str21;
	private String str22;
	private String str23;
	private String str24;
	private String str25;
	private String str26;
	private String str27;
	private String str28;
	private String str29;
	private String str30;
	private String str31;
	private String str32;
	
	public String getStr1() {
		return str1;
	}
	public void setStr1(String str1) {
		this.str1 = str1;
	}
	public String getStr2() {
		return str2;
	}
	public void setStr2(String str2) {
		this.str2 = str2;
	}
	public String getStr3() {
		return str3;
	}
	public void setStr3(String str3) {
		this.str3 = str3;
	}
	public String getStr4() {
		return str4;
	}
	public void setStr4(String str4) {
		this.str4 = str4;
	}
	public String getStr5() {
		return str5;
	}
	public void setStr5(String str5) {
		this.str5 = str5;
	}
	public String getStr6() {
		return str6;
	}
	public void setStr6(String str6) {
		this.str6 = str6;
	}
	public String getStr7() {
		return str7;
	}
	public void setStr7(String str7) {
		this.str7 = str7;
	}
	public String getStr8() {
		return str8;
	}
	public void setStr8(String str8) {
		this.str8 = str8;
	}
	public String getStr9() {
		return str9;
	}
	public void setStr9(String str9) {
		this.str9 = str9;
	}
	public String getStr10() {
		return str10;
	}
	public void setStr10(String str10) {
		this.str10 = str10;
	}
	public String getStr11() {
		return str11;
	}
	public void setStr11(String str11) {
		this.str11 = str11;
	}
	public String getStr12() {
		return str12;
	}
	public void setStr12(String str12) {
		this.str12 = str12;
	}
	public String getStr13() {
		return str13;
	}
	public void setStr13(String str13) {
		this.str13 = str13;
	}
	public String getStr14() {
		return str14;
	}
	public void setStr14(String str14) {
		this.str14 = str14;
	}
	public String getStr15() {
		return str15;
	}
	public void setStr15(String str15) {
		this.str15 = str15;
	}
	public String getStr16() {
		return str16;
	}
	public void setStr16(String str16) {
		this.str16 = str16;
	}
	public String getStr17() {
		return str17;
	}
	public void setStr17(String str17) {
		this.str17 = str17;
	}
	public String getStr18() {
		return str18;
	}
	public void setStr18(String str18) {
		this.str18 = str18;
	}
	public String getStr19() {
		return str19;
	}
	public void setStr19(String str19) {
		this.str19 = str19;
	}
	public String getStr20() {
		return str20;
	}
	public void setStr20(String str20) {
		this.str20 = str20;
	}
	public String getStr21() {
		return str21;
	}
	public void setStr21(String str21) {
		this.str21 = str21;
	}
	public String getStr22() {
		return str22;
	}
	public void setStr22(String str22) {
		this.str22 = str22;
	}
	public String getStr23() {
		return str23;
	}
	public void setStr23(String str23) {
		this.str23 = str23;
	}
	public String getStr24() {
		return str24;
	}
	public void setStr24(String str24) {
		this.str24 = str24;
	}
	public String getStr25() {
		return str25;
	}
	public void setStr25(String str25) {
		this.str25 = str25;
	}
	public String getStr26() {
		return str26;
	}
	public void setStr26(String str26) {
		this.str26 = str26;
	}
	public String getStr27() {
		return str27;
	}
	public void setStr27(String str27) {
		this.str27 = str27;
	}
	public String getStr28() {
		return str28;
	}
	public void setStr28(String str28) {
		this.str28 = str28;
	}
	public String getStr29() {
		return str29;
	}
	public void setStr29(String str29) {
		this.str29 = str29;
	}
	public String getStr30() {
		return str30;
	}
	public void setStr30(String str30) {
		this.str30 = str30;
	}
	public String getStr31() {
		return str31;
	}
	public void setStr31(String str31) {
		this.str31 = str31;
	}
	public String getStr32() {
		return str32;
	}
	public void setStr32(String str32) {
		this.str32 = str32;
	}
	@Override
	public String toString() {
		return "WeatherInfo [str1=" + str1 + ", str2=" + str2 + ", str3="
				+ str3 + ", str4=" + str4 + ", str5=" + str5 + ", str6=" + str6
				+ ", str7=" + str7 + ", str8=" + str8 + ", str9=" + str9
				+ ", str10=" + str10 + ", str11=" + str11 + ", str12=" + str12
				+ ", str13=" + str13 + ", str14=" + str14 + ", str15=" + str15
				+ ", str16=" + str16 + ", str17=" + str17 + ", str18=" + str18
				+ ", str19=" + str19 + ", str20=" + str20 + ", str21=" + str21
				+ ", str22=" + str22 + ", str23=" + str23 + ", str24=" + str24
				+ ", str25=" + str25 + ", str26=" + str26 + ", str27=" + str27
				+ ", str28=" + str28 + ", str29=" + str29 + ", str30=" + str30
				+ ", str31=" + str31 + ", str32=" + str32 + "]";
	}
	
	
}

复制代码

Servelt业务逻辑类

QueryCity.java

package com.yk.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.yk.entity.City;
import com.yk.util.XmlCityParse;


public class QueryCity extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("UTF-8");
		XmlCityParse xmlCityParse = new XmlCityParse();
		int id = Integer.parseInt(request.getParameter("pid"));
		List<City> cities = xmlCityParse.getCityList(id);
		
		System.out.println(cities);
//		Gson gson = new Gson();
//		String citiesStr = gson.toJson(cities);
//		System.out.println(citiesStr);
		
		PrintWriter out = response.getWriter();
		response.setHeader("Cache-Control","no-cache");
		response.setContentType("text/xml");
		out.println("<response>");
		for(int i=0;i<cities.size(); i++) {
			out.println("<id>"+ cities.get(i).getId() + "</id>");  
			out.println("<name>"+ cities.get(i).getName() + "</name>");
		}  
		out.println("</response>");  
		out.flush();
		out.close();

	}

}
复制代码

QueryProvince.java

package com.yk.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.yk.entity.Province;
import com.yk.util.XmlProvinceParse;


public class QueryProvince extends HttpServlet {
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		XmlProvinceParse xmlDomParse = new XmlProvinceParse();
		List<Province> provinceList = xmlDomParse.getProvinceList();
		request.getSession().setAttribute("provinces", provinceList);
		request.getRequestDispatcher("index.jsp").forward(request, response);
//		response.sendRedirect("index.jsp");
	}

}

复制代码

QueryWeather.java

package com.yk.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.yk.entity.City;
import com.yk.entity.WeatherInfo;
import com.yk.util.XmlCityParse;
import com.yk.util.XmlWeatherParse;


public class QueryWeather extends HttpServlet {
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		XmlWeatherParse xmlWeatherParse = new XmlWeatherParse();
		int id = Integer.parseInt(request.getParameter("cid"));
		WeatherInfo weatherInfo = xmlWeatherParse.getWeatherInfo(id);
		PrintWriter out = response.getWriter();

		response.setHeader("Cache-Control", "no-cache"); 
		response.setContentType("text/xml");
		out.println("<response>");
		out.println("<str1>"+ weatherInfo.getStr1() + "</str1>");
		out.println("<str2>"+ weatherInfo.getStr2() + "</str2>");  
		out.println("<str5>"+ weatherInfo.getStr5() + "</str5>");
		out.println("<str6>"+ weatherInfo.getStr6() + "</str6>");  
		out.println("<str8>"+ weatherInfo.getStr8() + "</str8>");  
		out.println("<str9>"+ weatherInfo.getStr9() + "</str9>");
		out.println("<str10>"+ weatherInfo.getStr10() + "</str10>");
		out.println("<str11>"+ weatherInfo.getStr11() + "</str11>");
		out.println("<str12>"+ weatherInfo.getStr12() + "</str12>");
		out.println("<str13>"+ weatherInfo.getStr13() + "</str13>");  
		out.println("<str14>"+ weatherInfo.getStr14() + "</str14>");
		out.println("<str15>"+ weatherInfo.getStr15() + "</str15>"); 
		out.println("<str16>"+ weatherInfo.getStr16() + "</str16>");  
		out.println("<str17>"+ weatherInfo.getStr17() + "</str17>");
		out.println("<str18>"+ weatherInfo.getStr18() + "</str18>");  
		out.println("<str19>"+ weatherInfo.getStr19() + "</str19>");
		out.println("<str20>"+ weatherInfo.getStr20() + "</str20>");  
		out.println("<str21>"+ weatherInfo.getStr21() + "</str21>");  
		out.println("<str22>"+ weatherInfo.getStr22() + "</str22>");  
		out.println("<str23>"+ weatherInfo.getStr23() + "</str23>");  
		out.println("<str24>"+ weatherInfo.getStr24() + "</str24>");
		out.println("<str25>"+ weatherInfo.getStr25() + "</str25>");
		out.println("<str26>"+ weatherInfo.getStr26() + "</str26>");
		out.println("<str27>"+ weatherInfo.getStr27() + "</str27>");
		out.println("<str28>"+ weatherInfo.getStr28() + "</str28>");  
		out.println("<str29>"+ weatherInfo.getStr29() + "</str29>");
		out.println("<str30>"+ weatherInfo.getStr30() + "</str30>");  
		out.println("<str31>"+ weatherInfo.getStr31() + "</str31>");
		out.println("<str32>"+ weatherInfo.getStr32() + "</str32>");  
		out.println("</response>");  
		out.flush();
		out.close();
	}

}

复制代码

XML文件解析类: XmlCityParse.java

package com.yk.util;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.List;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

import com.yk.entity.City;


public class XmlCityParse {
	
	public List<City> getCityList(int provinceId) {
		List<City> cityList = new ArrayList<City>();
		
		try {
			
			File file = new File("City.xml");
			URL url = new URL("http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getSupportCityDataset?theRegionCode="+provinceId);
			URLConnection con = url.openConnection();
			con.connect();
			
			InputStream is = con.getInputStream();
			OutputStream os = new FileOutputStream(file, false);
			
			byte[] data = new byte[1024];
			int length;
			while(-1 != (length=is.read(data))) {
				os.write(data, 0, length);
			}
			os.flush();
			os.close();
			is.close();
			
			
			DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
			DocumentBuilder documentBuilder = factory.newDocumentBuilder();
			Document doc = documentBuilder.parse(file);
			
			Element element = doc.getDocumentElement();
			
			NodeList nodeList = doc.getElementsByTagName("City");
			
			int len = nodeList.getLength();
//			System.out.println(len);
			for(int i=0; i<len; i++) {
				City City = new City();
				Node node = nodeList.item(i);
				
				int len2 = node.getChildNodes().getLength();
				for(int j=0; j<len2; j++) {
					Node node2 = node.getChildNodes().item(j);
					if(node2.getNodeType() == 1) {
						String content = node2.getFirstChild().getNodeValue();
						String elementName = node2.getNodeName();
						if("CityID".equals(elementName)) {
							City.setId(content);
						} else if("CityName".equals(elementName)) {
							City.setName(content);
						} 
					}
				}
				cityList.add(City);
			}
			
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (ParserConfigurationException e) {
			e.printStackTrace();
		} catch (SAXException e) {
			e.printStackTrace();
		}
		return cityList;
	}
	
	public static void main(String[] args) {
		XmlCityParse xmlCityParse = new XmlCityParse();
		List<City> cityList = xmlCityParse.getCityList(31118);
		for(City city : cityList) {
			System.out.println(city);
		}
	}

}

复制代码

XmlWeatherParse.java

package com.yk.util;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.List;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

import com.yk.entity.Province;
import com.yk.entity.WeatherInfo;


public class XmlWeatherParse {
	
	public WeatherInfo getWeatherInfo(int cityId) {
		WeatherInfo weather = new WeatherInfo();
		try {
			
			File file = new File("weather.xml");
			URL url = new URL("http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getWeather?theCityCode="+cityId+"&theUserID=");
			URLConnection con = url.openConnection();
			con.connect();
				
			InputStream is = con.getInputStream();
			OutputStream os = new FileOutputStream(file, false);
				
			byte[] data = new byte[1024];
			int length;
			while(-1 != (length=is.read(data))) {
				os.write(data, 0, length);
			}
			os.flush();
			os.close();
			is.close();
			
			
			DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
			DocumentBuilder documentBuilder = factory.newDocumentBuilder();
			Document doc = documentBuilder.parse(file);
			
			Element element = doc.getDocumentElement();
			
			NodeList nodeList = doc.getElementsByTagName("string");
			
			int len = nodeList.getLength();
//			System.out.println(len);
			for(int i=0; i<len; i++) {
				Node node = nodeList.item(i);
				String content = node.getFirstChild().getNodeValue();
				switch (i) {
				case 0: weather.setStr1(content); break;
				case 1: weather.setStr2(content); break;
				case 2: weather.setStr3(content); break;
				case 3: weather.setStr4(content); break;
				case 4: weather.setStr5(content); break;
				case 5: weather.setStr6(content); break;
				case 6: weather.setStr7(content); break;
				case 7: weather.setStr8(content); break;
				case 8: weather.setStr9(content); break;
				case 9: weather.setStr10(content); break;
				case 10: weather.setStr11(content); break;
				case 11: weather.setStr12(content); break;
				case 12: weather.setStr13(content); break;
				case 13: weather.setStr14(content); break;
				case 14: weather.setStr15(content); break;
				case 15: weather.setStr16(content); break;
				case 16: weather.setStr17(content); break;
				case 17: weather.setStr18(content); break;
				case 18: weather.setStr19(content); break;
				case 19: weather.setStr20(content); break;
				case 20: weather.setStr21(content); break;
				case 21: weather.setStr22(content); break;
				case 22: weather.setStr23(content); break;
				case 23: weather.setStr24(content); break;
				case 24: weather.setStr25(content); break;
				case 25: weather.setStr26(content); break;
				case 26: weather.setStr27(content); break;
				case 27: weather.setStr28(content); break;
				case 28: weather.setStr29(content); break;
				case 29: weather.setStr30(content); break;
				case 30: weather.setStr31(content); break;
				case 31: weather.setStr32(content); break;
				default: break;
				}
				
			}
				
			
		} catch (MalformedURLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ParserConfigurationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SAXException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return weather;
	}
	
	public static void main(String[] args) {
		XmlWeatherParse xmlWeatherParse = new XmlWeatherParse();
		WeatherInfo weatherInfo = xmlWeatherParse.getWeatherInfo(1780);
		System.out.println(weatherInfo);
	}

}

复制代码

前端jsp页面 inde.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<title>天气查询</title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0px auto;
			padding: 0px;
		}
		.ul1 {
			padding-top: 30px;
		}
		.ul1 li {
			list-style: none;
			float: left;
			width: 150px;
			height: 30px;
			padding-left: 25px;
		}
		.ul2 li {
			list-style: none;
			float: left;
			padding-left: 10px;
		}
		.ul2 li select {
			width: 100px;
			height: 20px;
		}
		.ul3 {
			clear: both;
			padding-top: 10px;
		}
		.ul3 li {
			list-style: none;
			padding-left: 26px;
			margin-top: 20px;
			
		}
		.ul3 li input {
			width: 500px;
			height: 20px;
		}
		#weather {
			width: 800px;
			height: 600px;
			background: skyblue;
			border: 10px skyblue solid;
		}
		#top {	
			width: 800px;
			height: 400px;
			background-size: auto;
			background: url(images/blue.jpg) no-repeat;
		}
		#bottom {
			width: 800px;
			height: 200px;
			background: bluesky;
		}
		#bottom ul {
			padding-top: 25px;
			padding-left: 20px;
		}
		#bottom ul li {
			list-style: none;
			float: left;
			padding-left: 10px;
		}
		#bottom ul li div {
			width: 140px;
			height: 150px;
			background-color: white;
		}
		.weatherinfo {
			list-style: none;
			line-height: 150%;
			font-size: 12px;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		/* function provinceChange() {
			var objS = document.getElementById("pid");
	        var value = objS.options[objS.selectedIndex].value;
	        var nowProvince = objS.options[objS.selectedIndex].innerHTML;
	        window.location = "queryCity?pid="+value+"&pname="+nowProvince;
		} */
		
		function getWeather() {
			createXMLHttpRequest();
            var objS = document.getElementById("myselect");
	        var value = objS.options[objS.selectedIndex].value;
            var url = "queryWeather?cid="+value;
            XMLHttpReq.open("GET", url, true);  
            XMLHttpReq.onreadystatechange = DisplayWeather;//指定响应函数  
            XMLHttpReq.send(null);  // 发送请求   */
		}
		
		function DisplayWeather() {
			if(XMLHttpReq.responseXML != null) {
				var text1 = XMLHttpReq.responseXML.getElementsByTagName("str1")[0].firstChild.nodeValue;
				var text2 = XMLHttpReq.responseXML.getElementsByTagName("str2")[0].firstChild.nodeValue;
				var text3 = XMLHttpReq.responseXML.getElementsByTagName("str5")[0].firstChild.nodeValue;
				var text4 = XMLHttpReq.responseXML.getElementsByTagName("str6")[0].firstChild.nodeValue;
				
				var day11 = XMLHttpReq.responseXML.getElementsByTagName("str8")[0].firstChild.nodeValue;
				var day12 = XMLHttpReq.responseXML.getElementsByTagName("str9")[0].firstChild.nodeValue;
				var day13 = XMLHttpReq.responseXML.getElementsByTagName("str10")[0].firstChild.nodeValue;
				var day14 = XMLHttpReq.responseXML.getElementsByTagName("str11")[0].firstChild.nodeValue;
				var day15 = XMLHttpReq.responseXML.getElementsByTagName("str12")[0].firstChild.nodeValue;
				
				var day21 = XMLHttpReq.responseXML.getElementsByTagName("str13")[0].firstChild.nodeValue;
				var day22 = XMLHttpReq.responseXML.getElementsByTagName("str14")[0].firstChild.nodeValue;
				var day23 = XMLHttpReq.responseXML.getElementsByTagName("str15")[0].firstChild.nodeValue;
				var day24 = XMLHttpReq.responseXML.getElementsByTagName("str16")[0].firstChild.nodeValue;
				var day25 = XMLHttpReq.responseXML.getElementsByTagName("str17")[0].firstChild.nodeValue;
				
				var day31 = XMLHttpReq.responseXML.getElementsByTagName("str18")[0].firstChild.nodeValue;
				var day32 = XMLHttpReq.responseXML.getElementsByTagName("str19")[0].firstChild.nodeValue;
				var day33 = XMLHttpReq.responseXML.getElementsByTagName("str20")[0].firstChild.nodeValue;
				var day34 = XMLHttpReq.responseXML.getElementsByTagName("str21")[0].firstChild.nodeValue;
				var day35 = XMLHttpReq.responseXML.getElementsByTagName("str22")[0].firstChild.nodeValue;
				
				var day41 = XMLHttpReq.responseXML.getElementsByTagName("str23")[0].firstChild.nodeValue;
				var day42 = XMLHttpReq.responseXML.getElementsByTagName("str24")[0].firstChild.nodeValue;
				var day43 = XMLHttpReq.responseXML.getElementsByTagName("str25")[0].firstChild.nodeValue;
				var day44 = XMLHttpReq.responseXML.getElementsByTagName("str26")[0].firstChild.nodeValue;
				var day45 = XMLHttpReq.responseXML.getElementsByTagName("str27")[0].firstChild.nodeValue;
				
				var day51 = XMLHttpReq.responseXML.getElementsByTagName("str28")[0].firstChild.nodeValue;
				var day52 = XMLHttpReq.responseXML.getElementsByTagName("str29")[0].firstChild.nodeValue;
				var day53 = XMLHttpReq.responseXML.getElementsByTagName("str30")[0].firstChild.nodeValue;
				var day54 = XMLHttpReq.responseXML.getElementsByTagName("str31")[0].firstChild.nodeValue;
				var day55 = XMLHttpReq.responseXML.getElementsByTagName("str32")[0].firstChild.nodeValue;
				
				$("#province").val(text1);
	        	$("#city").val(text2);
	        	$("#text1").val(text3);
	        	$("#text2").val(text4);
	        	
	        	$(".day1").empty();
	        	$(".day2").empty();
	        	$(".day3").empty();
	        	$(".day4").empty();
	        	$(".day5").empty();
	        	
	        	$(".day1").html("<li class='weatherinfo'>" + "<img src='images/"+day14+"'/>" + "&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/"+day15+"'/>" +"</li>" + "<li class='weatherinfo'>"+day11+"</li>" + "<li class='weatherinfo'>"+day12+"</li>" + "<li class='weatherinfo'>"+day13+"</li>");
	        	$(".day2").html("<li class='weatherinfo'>" + "<img src='images/"+day24+"'/>" + "&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/"+day25+"'/>" +"</li>" + "<li class='weatherinfo'>"+day21+"</li>" + "<li class='weatherinfo'>"+day22+"</li>" + "<li class='weatherinfo'>"+day23+"</li>");
	        	$(".day3").html("<li class='weatherinfo'>" + "<img src='images/"+day34+"'/>" + "&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/"+day35+"'/>" +"</li>" + "<li class='weatherinfo'>"+day31+"</li>" + "<li class='weatherinfo'>"+day32+"</li>" + "<li class='weatherinfo'>"+day33+"</li>");
	        	$(".day4").html("<li class='weatherinfo'>" + "<img src='images/"+day44+"'/>" + "&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/"+day45+"'/>" +"</li>" + "<li class='weatherinfo'>"+day41+"</li>" + "<li class='weatherinfo'>"+day42+"</li>" + "<li class='weatherinfo'>"+day43+"</li>");
	        	$(".day5").html("<li class='weatherinfo'>" + "<img src='images/"+day54+"'/>" + "&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/"+day55+"'/>" +"</li>" + "<li class='weatherinfo'>"+day51+"</li>" + "<li class='weatherinfo'>"+day52+"</li>" + "<li class='weatherinfo'>"+day53+"</li>");
			}
			
        }  
		
		var XMLHttpReq;  
        //创建XMLHttpRequest对象         
        function createXMLHttpRequest() {  
            if(window.XMLHttpRequest) { //Mozilla 浏览器  
                XMLHttpReq = new XMLHttpRequest();
            }  
            else if (window.ActiveXObject) { // IE浏览器  
                try {  
                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");  
                } catch (e) {  
                    try {  
                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
                    } catch (e) {}  
                }  
            }  
        }  
        //发送请求函数  
        function sendRequest() {  
            createXMLHttpRequest();  
            var objS = document.getElementById("pid");
	        var value = objS.options[objS.selectedIndex].value;
            var url = "queryCity?pid="+value;
            XMLHttpReq.onreadystatechange = getCities;//指定响应函数  
            XMLHttpReq.open("GET", url, true);  
            XMLHttpReq.send(null);  // 发送请求  
        }  
        // 处理返回信息函数  
        function getCities() {  
            if (XMLHttpReq.readyState == 4) { // 判断对象状态  
                if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息  
                    DisplayHot();  
                } else { //页面不正常  
                    window.alert("您所请求的页面有异常。");
                }  
            }  
        }  
        function DisplayHot() {
        	var info = "";
        	var len = XMLHttpReq.responseXML.getElementsByTagName("name").length;
        	$("#myselect").empty();
        	info += "<option>"+"请输入区县"+"</option>";
        	for(var i=0; i<len; i++) {
        		var id = XMLHttpReq.responseXML.getElementsByTagName("id")[i].firstChild.nodeValue;  
        		var name = XMLHttpReq.responseXML.getElementsByTagName("name")[i].firstChild.nodeValue;  
        		info += "<option value='"+id+ "' id='cid_'"+(i+1)  +">"+name+"</option>";
        	}
        	$("#myselect").html(info);
        }  
 	
	</script>
</head>

<body> 
	<div id="weather">
		<div id="top">
			<ul class="ul1">
				<li><input type="text" id="province" placeholder="省级"/></li>
				<li><input type="text" id="city" placeholder="市/县"/></li>	
			</ul>
			<ul class="ul2">
				<li>&nbsp;&nbsp;&nbsp;&nbsp;省级：
					<select id="pid" onchange="sendRequest()">
						<option>请选择省份</option>
						<c:forEach items="${provinces}" var="pro">
							<option id="provinceId" value="${pro.id }" >${pro.name }</option>
						</c:forEach>
					</select>
				</li>
				<li>市/县：
					<select id="myselect">
						<%--  <c:forEach items="${cities}" var="city">--%>
						<!-- <option id="cityId"></option> -->
						<%--</c:forEach>--%>
					</select>
				</li>
				<li><input type="button" name="query" value="实时查询" onclick="getWeather()"></li>
			</ul>
			<ul class="ul3">
				<li><input type="text" id="text1" placeholder="今日天气实况"/></li>
				<li><input type="text" id="text2" placeholder="紫外线强度" /></li>	
			</ul>
		</div>
		<div id="bottom">
			<ul>
				<li>
					<div>
						<ul class="day1"></ul>
					</div>
				</li>
				<li>
					<div>
						<ul class="day2"></ul>
					</div>
				</li>
				<li>
					<div>
						<ul class="day3"></ul>
					</div>
				</li>
				<li>
					<div>
						<ul class="day4"></ul>
					</div>
				</li>
				<li>
					<div>
						<ul class="day5"></ul>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	
	
</body>
</html>
复制代码

写在最后

觉得有用，一键三连支持博主哦！