4.0 JSP和Web页面的交互

jsp教学课件

第四章 JSP和Web页面的交互东北大学东软信息技术学院 计算机系 2005.3

jsp教学课件

概述获取表单提交信息的方法 文本框的使用 列表框的使用 复选框的使用 单选按钮的使用 HTML表单和JSP页面结合的方式 JSP页面和客户端脚本的结合

jsp教学课件

JSP和Web页面交互的初步体验

例：03.htm 通过源文件可以看到，在当前页面中使用 了form标记，在form标记中又添加了两个 文本框。客户端通过在两个文本框输入信 息来和服务器端的JSP页面交互。 使用request.getParameter(String value)来 获取客户端提交过来的信息。

jsp教学课件

获取提交信息发送到服务器的信息是存放在内部对象 Request中的，可以通过Request对象的 响应方法来获取这些信息。 用到的Request对象的方法是 Request.getParameter() Request.getParameterValues ()

jsp教学课件

获取提交信息方法(一)request.getParameter(“variablename”) 其中： request是内部对象，包含用户请求信息。 getParameter()方法,获取某个变量的值。 参数variablename是待获取变量的名字. 变量的名字应与表单提交时的某个变量一致。 返回值是字符串类型的变量. 如果参数指定的对象不存在，返回值为null。

jsp教学课件

对获取的信息进行编码转换方法一： String name=request.getParameter("name"); name=new String(name.getBytes("8859_1")); 对name字符串进行编码转换，是用来解决中文乱 码问题的。 方法二： request.setCharacterEncoding(“gb2312”);

jsp教学课件

获取提交信息方法(二)request.getParameter(param)方法只能取出变量的一个 值。 request.getParameterValues(param) 能 够 取 出 变 量 的 多 个值，主要用于复选框以及可多选的列表框的值的获取。 其中，参数是要获取的变量的名字。返回值是一个枚举类 型的变量，可以使用数组接收。 String mybox[]; mybox=request.getParameterValues("mybox"); if(mybox!=null) { for(int i=0;i<mybox.length;i++) out.println(mybox[i]); }

jsp教学课件

文本框的使用在HTML中，文本框分为：单行文本框：用于输入普通的文本信息。 密码文本框：用于输入密码。 滚动文本框：用于获取用户输入的大段文本信息，可 以输入多行。 例：password.htm(密码框) echo2.htm(滚动框) 注意：在JSP程序中定义自己的方法，必须将该方法 放在 <%! 和 %> 标记中。

jsp教学课件

列表框的使用为避免用户输入错误，可以采用列表框的方式。在 HTML中，采用select标记来实现。 例：form3.htm 注意：在option标记中，如果指定了value属性，在 JSP页面中通过request.getParameter()得到的就是 value的值，否则得到的是<option>和</option>标 记中的文字。 当希望列表中的选项能被多选时，使用multiple属 性。 例：form3b.htm

jsp教学课件

复选框的使用复选框的作用是允许用户在备选选项中选择多个选 项。 例：echo4b.htm

jsp教学课件

单选按钮的使用当多

个选项中只能选择一个时，使用单选 按钮。 例：form5.htm form5.htm 注意：使用单选按钮时，同一组单选按钮 的“Name”属性一定要一样，否则达不到 单选的效果。

jsp教学课件

HTML表单和JSP页面结合的方式前面的案例中，“表单”和“处理表单信息的JSP 程序”分别属于.htm和.jsp文件，但有时需要把它 们组合成一个.jsp文件。 例：formjsp1.jsp formjsp2.jsp

jsp教学课件

JSP页面和客户端脚本的结合用户在HTML页面中输入相应信息后，可能需要经 过验证才能进行后续的处理。验证分为服务器端验 证和客户端验证。 例：simple.htm(服务器端验证) 由于在服务器端验证，要反复在客户端和服务器之 间交互信息，因此会影响系统执行效率。实际应用 中，还会采用另一种方式——客户端验证。 例：simple2.htm

jsp教学课件

综合案例——实现图片提交按钮 实现图片提交按钮 综合案例图片提交按钮实例：picsubmit.htm