@TOC

JavaWeb天气预报实时查询系统

本系统简单的实现了基于http://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>
觉得有用,一键三连支持博主哦!