Ajax考试复习

编程任务：使用AJAX 技术开发一个查看各个省份主要城市天气的Web 程序。
要求：
1 打开主页之后显示三个省份如下：

2 鼠标点击任何一个省份，展开该省份的4 个主要城市，例如，点击了四川省之后，如图：

3.再次点击展开的省份之后，将收起该省份的主要城市。若点击不同的省份之后，将展开不同省份的主要城市。：
4 自己定义数据库存储这些城市的天气信息，例如：天气情况、温度、湿度等等。
5 当用户鼠标悬停在任何一个城市上的时候，将以弹出框的形式显示这个城市的天气信息。例如，将鼠标悬停在
成都市的时候将得到如下结果：

image.png

6 鼠标离开该城市之后，弹出框将消失。
注意：
1 请求的天气数据必须使用AJAX 的形式获取。
2 数据必须和数据库当中的一致。
3 考试结束后，必须将数据库创建脚本和数据和代码一起提交，数据脚本命名为data.sql。

最终效果图：

工程建立环境：

项目结构.gif

数据库表

细节说明：

image.png

TestServlet.java

utf8显示记着
write中可以直接添加html标签
引号需要转义
为了不多次查询数据库采用数据存在session中 ajax.jsp在加载完成的时候从数据库取数据存到session中（即Homeservlet.java的作用）

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//utf8 记着
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
            ArrayList<MyWeather> list = new ArrayList<>();
            list = (ArrayList<MyWeather>)request.getSession().getAttribute("MyList"); 
            String nameString = request.getParameter("city");
//          System.out.println(nameString);
            for(MyWeather temp : list) {
                if(temp.getName().equals(nameString)) {
                    String name = temp.getName();
                    String weather = temp.getWeather();
                    String temperature = temp.getTemperature();
                    String humidity = temp.getHumidity();
//                  System.out.println(name);   
                    response.getWriter().write("<h3 ><span id=\"name\">"+name+"</span>天气</h3>\r\n" + 
                            "                   <p>天气：<span id=\"weather\">"+weather+"</span></p>\r\n" + 
                            "                   <p>气温：<span id=\"temperature\">"+temperature+"</span></p>\r\n" + 
                            "                   <p>湿度：<span id=\"humidity\">"+humidity+"</span></p>");
                    break;
                }
            }
        
    }

项目网盘：https://pan.baidu.com/s/13mOjrlOnVTJ0fRfIQkqWug
网盘密码：?grf
(❓处是一个小于5的数字) (●'◡'●)皮一下很开心

最后编辑于：2019.05.22 17:10:44