__JSP上级实验指导书二_jQuery

《JSP开发技术》课程实验指导书

实验2 jQuery实验

一实验目的：

学习使用MyEclipse开发jQuery应用，掌握jQuery的使用。

二实验内容：

编写一个注册信息填写界面，使用jQuery和JavaScript处理输出的信息，该页面能完成多种信息检查，并能利用jQuery发送Ajax请求。

三实验步骤：

1、创建的JavaWeb项目名称为JQueryTest

2、在根目录下创建jquerylib目录，拷贝进去jquery-1.9.1.js文件。在根目录下建立JQueryRegister.jsp,删除其中以下内容：

<%

String path = request.getContextPath();

String basePath =

request.getScheme()+"://"+request.getServerName()+":"+request. getServerPort()+path+"/";

%>

3、页面刚加载后显示界面：

点击“填写详细信息“按钮显示界面：

点击“填写简要信息”，又恢复初始页面

4、当光标离开“姓名”文本框时，如果输入的字符少于4个字符，则文本框后显示红色“姓名少于四个字符！”，如果输入的姓名为“zhangsan”或者”lisi”，则显示红色“该用户名已经注册”，否则显示黑色“该用户名可以使用”。后台判断的servlet地址为/register，对应的Java实现类为servlets包中的Register.java (要求使用jQuery的load方法实现)

5、当光标离开“密码确认”文本框时，如果和“密码”文本框输入的内容不一样，则“密码确认”文本框后显示红色“两次输入的密码不一致”

6、当光标离开“邮箱”文本框时，如果输入的内容为空或邮件地址不包含“@”，则“邮箱”文本框后显示红色“请输入正确邮件地址”

7、当页面加载后，宿舍的第一个选择框的数据由Ajax向名为register的servlet发送请求，获取住宿楼的信息，一共有三栋楼（3号宿舍楼，7号宿舍楼，8号宿舍楼），每一栋宿舍楼对应三个寝室，如3号宿舍楼有301,302,303，7号宿舍楼有701,702,703,8号宿舍楼有801,802,803。开始时第二个选择框内容默认加载301,302,303，当第一个选择框内容改变时，第二个选择框的内容随之改变。

8、点击“查看使用协议”超链接，页面显示如下：

点击“隐藏使用协议”，页面恢复到原来界面：

9、填写完所有信息并点击“注册”按钮，如果没有勾选“同意本系统使用协议”，则弹出对话框提示“请同意本系统使用协议！”，如果勾选后，首先依此判断用户名，密码，邮箱是否符合要求，如果不符合，则在“提交”按钮后显示红色“XX不符合要求”，如以下界面：

如果符合“注册”按钮通过jQuery AJAX的load方法向名为register的servlet发送信息，并接受返回的信息，显示界面如下：

编程中用到的一些知识点：

0.为了区分三个按钮到底是哪一个进行了提交，可以在表单中设置一个隐藏域，域，如，在每个按钮提交前设置其value值，这样在servlet中就可以判断是哪个按钮进行的提交

1. 设置id为short按钮的单击事件处理函数为JavaScript函数function hideComponents(){…}

$("#short").click(hideComponents);

2. jquery对象的显示和隐藏的函数分别为show()和hide()

3. 点击超链接后由JavaScript函数处理后不转向href属性指定的页面，则JavaScript函数应该返回false。

4. 内容加边框可设置border属性为1px solid black

5. 判断id为ok的type=”checkbox”的input元素是否被选中较为特殊，最好使用DOM的方法进行判断：

$("#ok").get(0).checked == true

6. 如果在function usernameCheck() {…}内调用了$.get方法，而get方法里面设置了回调函数function callback(data, statusText)，需要注意的是虽然看起来callback是写在usernameCheck内部，但是由于调用时是异部调用，所以可能会出现设置usernameCheck里变量不成功的情况，如果想将callback里的信息记录下来，需要使用一个在usernameCheck函数外的全局变量记录。

实验报告中手写提交JQueryRegister.jsp和Register.java类