js中的事件。
js对浏览器，鼠标发生的一些列动作的监听。
比如鼠标的监听事件 onclick,onmouseout,onmouseover
还有对键盘的监听 onkeyDown()
表单事件 onblur onfocuse onchange
层级联动
版本1
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表单项中value的值发生改变的时候触发onchange事件
// 实现层级联动，1先要监听第一个select切换的动作 -->
s1.onchange = function() {
//2获取当前被选中的option是哪一个
//select标签不带有value属性，那在js代码中通过Vlaue属性获取到的是select当前被选中的option的value的值
var s1value = s1.value
if (s1value == 1) {
//选中北京
//以下代码简单，但是对标签比较复杂的情况下，代码维护很麻烦
s2.innerHTML = "东城西城"
} else if (s1value == 2) {
//选中上海
s2.innerHTML = "宝山浦东"
} else if (s1value == 3) {
//选中河南
s2.innerHTML = "开封郑州"
}
}
}
版本2在版本1的基础上对option的添加 进行了修改，改为add(opstion)的方式
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表单项中value的值发生改变的时候触发onchange事件
// 实现层级联动，1先要监听第一个select切换的动作 -->
s1.onchange = function() {
//2获取当前被选中的option是哪一个
//select标签不带有value属性，那在js代码中通过Vlaue属性获取到的是select当前被选中的option的value的值
var s1value = s1.value
//需要清空s2里的所有option，避免在之前的基础上追加
//s2.innerHTML=""
//length表示内部option的个数，长度为0就表示没有一个option就是清空
s2.length = 0
if (s1value == 1) {
//选中北京
//以下代码简单，但是对标签比较复杂的情况下，代码维护很麻烦
//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的基础上进行数据上的优化，城市信息如果全部书写在js代码中option的组装移动到后台。
实现基本思路：
1在捕获到当前被选中的省的value之后
2把Value通过ajax传到一个servlet
3servlet获取到value之后根据value查找对应的市进行返回
4ajax获取服务器返回的数据进行添加option
前端中的html
window.onload = function() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
//表单项中value的值发生改变的时候触发onchange事件
// 实现层级联动，1先要监听第一个select切换的动作 -->
s1.onchange = function() {
//2获取当前被选中的option是哪一个
//select标签不带有value属性，那在js代码中通过Vlaue属性获取到的是select当前被选中的option的value的值
var s1value = s1.value
//需要清空s2里的所有option，避免在之前的基础上追加
//s2.innerHTML=""
//length表示内部option的个数，长度为0就表示没有一个option就是清空
s2.length = 0
//把s1value发送给后台的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) {
//不同的平台和不同的语言之间要做数据的传递
//服务器返回的是一个json字符串，我们需要对他解析，拿到我们想要的数据
var jsonStr = xhr.responseText
//js中解析json很简单,js可以直接把json字符串转成一个js中的对象
//此处获取到了一个js中数组，封装了第二个select所需要的数据
var obj = JSON.parse(jsonStr)
for (i = 0; i < obj.length; i++) {
//循环向城市的选项中添加服务器返回的数据对应的option
s2.add(new Option(obj[i].text, obj[i].value))
}
}
}
}
}
}
提供对应的servlet
1获取前端传递的省的标识
2根据省组装对应的json数据
Gson gson = new Gson();
String data = gson.toJson(cities);
3进行数据通过response输出到客户端
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取前端传递过来的选中的省的值
String s1 = req.getParameter("s1value");
int s1I = Integer.valueOf(s1);
// 根据省组装市
// 如果没有数据库，我们之前在js中的判断,比如(if (s1==1){})移动到后台的servlet中进行判断
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
创建表，把省和市保存到数据库中，并且根据省查询市的功能由数据库完成
实现
1准备mysql操作相关动作(jar，utils,xml配置，pojo)
2创建Dao类进行sql执行代码书写
3为表中插入测试数据
4servlet中调用dao中的方法进行执行
版本5
一进入页面，所有的省也是从数据库查询进行显示，而不是直接写死在html中
实现方式1一进入city.html页面就直接发起一个ajax请求，请求所有的省
版本5.1
除了可以使用ajax在一进入页面就访问后台获取数据以外，还可以直接使用servlet+jsp的方式
提供一个servlet:进入servlet以后插叙数据库，把数据保存到request作用域，转发到jsp
jsp（jstl+el）中：foreach循环生成option
网友评论