《HTML教程》_12.5.3-12.6教学材料.pptxVIP

首先，根据学生对课程的选择，构造请求参数字符串。学生选修一门课程，就是把该课程ID对应的复选框选中。要确定学生选修了哪几门课程，只需要看一下选中状态的复选框有几个即可。

回想一下DOM操作中节点的引用（查找）方法（见6.3节表6-4），自HTML5以后新增了一个querySelectorAll()方法，可以按照CSS的选择器选择指定的元素。CSS提供了属性选择器和伪类（或伪元素），可以用来选择某些网页元素。

在这里，我们需要查找所有type=’checkbox’，且checked属性为checked的input元素，根据这个要求，我们可以构造一个以下的选择器：input[type=checkbox]:checked

然后，可以使用document对象的querySelectorAll()方法查找所有符合这一选择器的所有复选框，得到一个NodeList类型的集合。注意这个NodeList不是普通的数组，不能使用遍历数组的办法（for…in）遍历这个集合。

只能使用最原始的for循环来遍历它，找到选择的所有课程，获取所有选中课程的代码如下：varselectedCourses=document.querySelectorAll(input[type=checkbox]:checked);

把所有选择的课程构造成以下格式的请求参数字符串：courseId=200807006courseId=200807008courseId=200907016请注意，最后一个课程ID（200907016）的后面没有符号，而其他课程ID后均有一个符号，所以最后一个课程ID要进行特殊处理。

构造请求参数的代码如下：vardata=; for(vari=0;iselectedCourses.length;i++){ data+=courseId=+selectedCourses[i].value; if(i!=selectedCourses.length-1){ data+=; } }

最后一个课程ID为selectedCourseNodeList中下标为selectedCourse.length–1的课程对象的ID。所以每次循环中都要判定是否为最后一个元素，如果不是，则在其后添加符号。如果是最后一个元素，则不添加。这就保证了最后一个ID后面不会添加，从而保证请求参数的最后不会加上。

构造请求参数字符串以后，就是创建异步对象、初始化请求——这里请求的URL是studentServlet?method=selectCourse，即StudentServlet中的selectCourse方法，注册事件处理程序处理服务器响应结果，最后是发送数据，也就是这里的请求参数字符串。

这里需要强调的是：这个操作会对服务器产生影响（在服务器上保存数据），所以使用POST请求方式；以POST方式发送请求时，在发送请求之前（即调用send()方法之前）设置请求头Content-Type，其值为application/x-www-form-urlencoded。

这一点是必须的，否则服务器收不到客户端发送的数据。用到的代码如下：req.setRequestHeader(Content-Type,application/x-www-form-urlencoded); req.send(data);提交选课请求的完整代码如清单12-13所示。

12.5.4显示选课结果——selectResult函数

这个函数十分简单，只是负责把服务器的响应显示在提示框中（即清单12-4中的divid=tip/）。完整代码如清单12-14所示，

12.5.5控制层选课功能的实现——selectCourse控制层所有关于学生的功能都在StudentServlet类中实现，选课功能也不例外。在StudentServlet.java中添加selectCourse方法，由于这个方法签名比较长，难于记住，我们还是采用老办法——复制+改名就可以了。

在这个方法中，首先要做的是接收客户端传来的参数。在12.5.3节，我们已经注意到请求参数字符串的格式为：courseId=200807006courseId=200807008courseId=200907016

也就是说相同名字的参数courseId有多个，而不是只有一个。在JSP中接收这种“多值”参数用的是request对象（也就是形式参数req）的getParameterValues()方法，它返回一个String类型的数组，代码如下：String[]courseIds=req.getParameterValues(courseId);

第二步，接下来要做的就是从Session