js中的事件。
js對瀏覽器，鼠標(biāo)發(fā)生的一些列動作的監(jiān)聽。
比如鼠標(biāo)的監(jiān)聽事件 onclick,onmouseout,onmouseover
還有對鍵盤的監(jiān)聽 onkeyDown()
表單事件 onblur? onfocuse? onchange?
層級聯(lián)動
版本1
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表單項中value的值發(fā)生改變的時候觸發(fā)onchange事件
// 實現(xiàn)層級聯(lián)動，1先要監(jiān)聽第一個select切換的動作 -->
s1.onchange = function() {
//2獲取當(dāng)前被選中的option是哪一個
//select標(biāo)簽不帶有value屬性，那在js代碼中通過Vlaue屬性獲取到的是select當(dāng)前被選中的option的value的值
var s1value = s1.value
if (s1value == 1) {
//選中北京
//以下代碼簡單，但是對標(biāo)簽比較復(fù)雜的情況下，代碼維護(hù)很麻煩
s2.innerHTML = "東城西城"
} else if (s1value == 2) {
//選中上海
s2.innerHTML = "寶山浦東"
} else if (s1value == 3) {
//選中河南
s2.innerHTML = "開封鄭州"
}
}
}
版本2在版本1的基礎(chǔ)上對option的添加 進(jìn)行了修改，改為add(opstion)的方式
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表單項中value的值發(fā)生改變的時候觸發(fā)onchange事件
// 實現(xiàn)層級聯(lián)動，1先要監(jiān)聽第一個select切換的動作 -->
s1.onchange = function() {
//2獲取當(dāng)前被選中的option是哪一個
//select標(biāo)簽不帶有value屬性，那在js代碼中通過Vlaue屬性獲取到的是select當(dāng)前被選中的option的value的值
var s1value = s1.value
//需要清空s2里的所有option，避免在之前的基礎(chǔ)上追加
//s2.innerHTML=""
//length表示內(nèi)部option的個數(shù)，長度為0就表示沒有一個option就是清空
s2.length = 0
if (s1value == 1) {
//選中北京
//以下代碼簡單，但是對標(biāo)簽比較復(fù)雜的情況下，代碼維護(hù)很麻煩
//s2.innerHTML = "東城西城"
//add方法用于向select中添加option
//option支持直接new 一個option對象
s2.add(new Option("東城", 1))
s2.add(new Option("西城", 2))
} else if (s1value == 2) {
//選中上海
//s2.innerHTML = "寶山浦東"
s2.add(new Option("寶山", 1))
s2.add(new Option("浦東", 2))
} else if (s1value == 3) {
//選中河南
//s2.innerHTML = "開封鄭州"
s2.add(new Option("開封", 1))
s2.add(new Option("鄭州", 2))
}
}
}
版本3在版本2的基礎(chǔ)上進(jìn)行數(shù)據(jù)上的優(yōu)化，城市信息如果全部書寫在js代碼中option的組裝移動到后臺。
實現(xiàn)基本思路：
1在捕獲到當(dāng)前被選中的省的value之后
2把Value通過ajax傳到一個servlet
3servlet獲取到value之后根據(jù)value查找對應(yīng)的市進(jìn)行返回
4ajax獲取服務(wù)器返回的數(shù)據(jù)進(jìn)行添加option
前端中的html
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表單項中value的值發(fā)生改變的時候觸發(fā)onchange事件
// 實現(xiàn)層級聯(lián)動，1先要監(jiān)聽第一個select切換的動作 -->
s1.onchange = function() {
//2獲取當(dāng)前被選中的option是哪一個
//select標(biāo)簽不帶有value屬性，那在js代碼中通過Vlaue屬性獲取到的是select當(dāng)前被選中的option的value的值
var s1value = s1.value
//需要清空s2里的所有option，避免在之前的基礎(chǔ)上追加
//s2.innerHTML=""
//length表示內(nèi)部option的個數(shù)，長度為0就表示沒有一個option就是清空
s2.length = 0
//把s1value發(fā)送給后臺的servlet
var xhr = new XMLHttpRequest();
xhr.open("GET", "getCity?s1value=" + s1value, true);
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//不同的平臺和不同的語言之間要做數(shù)據(jù)的傳遞
//服務(wù)器返回的是一個json字符串，我們需要對他解析，拿到我們想要的數(shù)據(jù)
var jsonStr = xhr.responseText
//js中解析json很簡單,js可以直接把json字符串轉(zhuǎn)成一個js中的對象
//此處獲取到了一個js中數(shù)組，封裝了第二個select所需要的數(shù)據(jù)
var obj = JSON.parse(jsonStr)
for (i = 0; i < obj.length; i++) {
//循環(huán)向城市的選項中添加服務(wù)器返回的數(shù)據(jù)對應(yīng)的option
s2.add(new Option(obj[i].text, obj[i].value))
}
}
}
}
}
}
提供對應(yīng)的servlet
1獲取前端傳遞的省的標(biāo)識
2根據(jù)省組裝對應(yīng)的json數(shù)據(jù)
Gson gson = new Gson();
String data = gson.toJson(cities);
3進(jìn)行數(shù)據(jù)通過response輸出到客戶端
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 獲取前端傳遞過來的選中的省的值
String s1 = req.getParameter("s1value");
int s1I = Integer.valueOf(s1);
// 根據(jù)省組裝市
// 如果沒有數(shù)據(jù)庫，我們之前在js中的判斷,比如(if (s1==1){})移動到后臺的servlet中進(jìn)行判斷
List cities = new ArrayList();
if (s1I == 1) {
cities.add(new City(1, "東城"));
cities.add(new City(2, "西城"));
} else if (s1I == 2) {
cities.add(new City(1, "寶山"));
cities.add(new City(2, "浦東"));
} else if (s1I == 3) {
cities.add(new City(1, "開封"));
cities.add(new City(2, "鄭州"));
cities.add(new City(3, "焦作"));
}
? ? ? ? ? ? ? Gson gson = new Gson();
String data = gson.toJson(cities);
System.out.println(data);
resp.setCharacterEncoding("utf-8");
resp.getWriter().print(data);
}
版本4
創(chuàng)建表，把省和市保存到數(shù)據(jù)庫中，并且根據(jù)省查詢市的功能由數(shù)據(jù)庫完成
實現(xiàn)
1準(zhǔn)備mysql操作相關(guān)動作(jar，utils,xml配置，pojo)
2創(chuàng)建Dao類進(jìn)行sql執(zhí)行代碼書寫
3為表中插入測試數(shù)據(jù)
4servlet中調(diào)用dao中的方法進(jìn)行執(zhí)行
版本5
一進(jìn)入頁面，所有的省也是從數(shù)據(jù)庫查詢進(jìn)行顯示，而不是直接寫死在html中
實現(xiàn)方式1一進(jìn)入city.html頁面就直接發(fā)起一個ajax請求，請求所有的省
版本5.1
除了可以使用ajax在一進(jìn)入頁面就訪問后臺獲取數(shù)據(jù)以外，還可以直接使用servlet+jsp的方式
提供一個servlet:進(jìn)入servlet以后插敘數(shù)據(jù)庫，把數(shù)據(jù)保存到request作用域，轉(zhuǎn)發(fā)到j(luò)sp
jsp（jstl+el）中：foreach循環(huán)生成option
