編程任務(wù):使用AJAX 技術(shù)開發(fā)一個(gè)查看各個(gè)省份主要城市天氣的Web 程序备燃。
要求:
1 打開主頁之后顯示三個(gè)省份如下:
3.再次點(diǎn)擊展開的省份之后趟佃,將收起該省份的主要城市。若點(diǎn)擊不同的省份之后昧捷,將展開不同省份的主要城市闲昭。:
4 自己定義數(shù)據(jù)庫存儲(chǔ)這些城市的天氣信息,例如:天氣情況靡挥、溫度汤纸、濕度等等。
5 當(dāng)用戶鼠標(biāo)懸停在任何一個(gè)城市上的時(shí)候芹血,將以彈出框的形式顯示這個(gè)城市的天氣信息贮泞。例如,將鼠標(biāo)懸停在
成都市的時(shí)候?qū)⒌玫饺缦陆Y(jié)果:
6 鼠標(biāo)離開該城市之后幔烛,彈出框?qū)⑾А?br>
注意:
1 請(qǐng)求的天氣數(shù)據(jù)必須使用AJAX 的形式獲取啃擦。
2 數(shù)據(jù)必須和數(shù)據(jù)庫當(dāng)中的一致。
3 考試結(jié)束后饿悬,必須將數(shù)據(jù)庫創(chuàng)建腳本和數(shù)據(jù)和代碼一起提交令蛉,數(shù)據(jù)腳本命名為data.sql。
最終效果圖:
工程建立環(huán)境:
數(shù)據(jù)庫表
細(xì)節(jié)說明:
TestServlet.java
utf8顯示記著
write中可以直接添加html標(biāo)簽
引號(hào)需要轉(zhuǎn)義
為了不多次查詢數(shù)據(jù)庫采用數(shù)據(jù)存在session中 ajax.jsp在加載完成的時(shí)候從數(shù)據(jù)庫取數(shù)據(jù)存到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;
}
}
}
項(xiàng)目網(wǎng)盤:https://pan.baidu.com/s/13mOjrlOnVTJ0fRfIQkqWug
網(wǎng)盤密碼:?grf
(?處是一個(gè)小于5的數(shù)字) (●'?'●)皮一下很開心