使用JSP处理HTML表单.ppt

第7章 使用JSP处理HTML表单,7.1在JSP中创建与处理HTML表单 7.2 与Form相关的常用标签的处理方法 7.3 表单数据的类型转换,7.1在JSP中创建与处理HTML表单,首先，JSP引擎把存放在request对象中的数据发到JSP页面指定的服务器端的组件（JavaBeans组件, servlet,或者enterprise bean），组件收到这些个数据以后，有可能再把这些数据存到数据库或者其他的地方存放起来，同时，返回一个response对象给JSP引擎。这时JSP引擎和Web服务器再发送一个整理好的完整的 页面给客户，也就是我们在浏览器上看到的结果。客户和服务器间的通信协议可以用HTTP，当然也可以用其他协议。,Client,request,response,JSP Container& Web Server,JSP File,request,response,Component,response,request,图7.1 数据流在服务器和客户之间的传递,7.1.1 一个动态交互的hello user实例,下面是一个简单的动态交互的hello user实例，该实例共包含3个文件。 一个JavaBean(NameHandler.java)用来传递数据。 两个JSP文件（hellouser.jsp和reponse.jsp） hellouser.jsp用来让客户通过HTML表单向JSP引擎输入数据； reponse.jsp用来在浏览器上返回结果。,JSP操纵HTML表单步骤,1、 写JSP原文件，创建一些HTML的表单并命名。 2、 在Java文件里写Bean，定义属性，GET或者SET方法来配合已经被你指定好名字的表单。 3、 回到JSP原文件中，增加标签来创建一个或者调用一个现成的Bean。 4、 增加标签设置HTML表单中需要SET方法的Bean的属性。 5、 增加标签设置HTML表单中需要GET方法的Bean的属性。 6、 如果需要处理更多的用户数据，用request对象。,7.1.2 创建HTML表单,HTML表单的形式如下 一个表单有三个基本组成部分。 表单标签:这里面包含了处理表单数据所用JSP程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 一个JSP页面中可以有多个表单，但是不能嵌套。,表单有以下三个重要的属性 action属性：属性定义了当表单被提交时数据被送往何处，如果为空，就提交给当前页面。 method属性：指定传输方式，GET或者POST enctype属性：指定将数据回发到服务器时浏览器使用的编码类型。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据在使用表单传送数据的时候，如果form 加了enctype=“multipart/form-data“ 这个属性，那么表单请求传到另一个jsp或servlet 里时是不能用request.getParameter()来获取到各个表单元素的值的。 是上传二进制数据,常用的web表单控件。总共有6类基本类型(不包括隐藏域等在页面中无法看到的)，如下图所示：,每个表单控件也都有各自的优缺点： 1、文本框(Textfield) 优点：对输入的内容几乎无任何限制; 缺点：由于文本框过度发达的自由无限制，导致它不能严格限制用户输入内容的类型(如：字符型，数字型等)，以及限制内容的长短; 2、命令按钮(Button) 优点：受益于按钮设计视觉上凸出的感觉，不光如此许多有凸出感的图片也会导致大量的用户点击(这是题外话了); 缺点：受制于按钮区域的限制，不能做得太长，谁见放两三行文字的按钮呢?因此，按钮内的文案需要简洁明了。 3、多选框(Checkbox) 优点：类似于读书考试时候做的多选题，可选择多个选项。还记得那个万恶的说明：选对一个给半分，选错一个不给分 ; 缺点：如果多选框过多，占用大量的空间。在空间紧张的时候要作合理的安排。,4、单选框(Radio Button) 优点：这也是从考试时的单选题来的，比多选框好些，每组最多只选择一个选项 ; 缺点：和多选框一样，如果选项过多，会占用大量的空间; 5、下拉列表(List/Menu) 如果说多选框与单选框是浪费空间的大户，下拉列表则恰巧与前两者相反。它节省空间又可有数量庞大的下拉选项，真是小而强。 优点：在空间有限的情况下，使用此小而强的控件，可以展示更多选项内容。比较常见的就是国家的下拉列表; 缺点：由于小而强过于节省空间，导致当下拉列表选项过多时。会让选择的人找不到要选择的选项; 6、文本域(File Field) 上传文件之用，左边的那个灰色输入框有时候会让人很迷惑：先输入文字再点浏览文件?,在B/S应用程序中，前台与后台的数据交互，都是通过HTML中Form表单完成的。Form提供了两种数据传输的方式get和post。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响。虽然为了方便的得到变量值，Web容器已经屏蔽了二者的一些差异，但是了解二者的差异在以后的编程也会很有帮助的。 Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：,7.1.3 使用GET/POST方法传递参数,1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。 2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。 3、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。,4、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post。 5、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。 6、Get是Form的默认方法。,第一种 GET 它将表单内容附加URL之后，中间用问号连接，然后传送至指定的程序做处理。 http:/specifiedURL?Name1=Value&Name2=Value2 在hello user 实例中，使用的是GET进行数据传送，表单数据传给hellouser.jsp页面的方式如下： http:/hellouser.jsp?username=liuyongpo 因为hellouser.jsp页面接收到数据后重定向到了response.jsp页面，所以地址栏看不到上述信息。 第二种 POST，这个方法是将表单内容作为一个数据体而不是URL的一部分传送给服务器的。所以URL中看不到表单的内容。,另外 用get方法传递中文有问题，用post没有问题。pageEncoding这个只对post起作用。get方法提交时，大家可以从地址栏里看到提交的参数，这是因为get方法传递是作为报文头提交的，而pageEncoding对报文头是没有作用的，所以仍然按照 iso8859-1编码，才出现了乱码问题。而post提交的是form表单的内容，pageEncoding指定了它的编码，所以他会按照指定编码传递。,7.1.4 使用JavaBean处理 表单数据,HTML表单的数据传到JavaBean里需要两个工作： 第一个工作用标签创建或者定位到JavaBean， 第二个工作在JavaBean里面用设置属性值。,7.1.5 将处理结果返回给客户端,用户将数据传到JavaBean，一旦想重新得到数据，并在JSP页面中显示出来，就要将处理结果返回给客户端。要实现这一步，则需要标签： 另外，还可以使用表达式直接调用Bean中的方法获得属性值： ,7.2 与Form相关的常用 标签的处理方法,FORM中常用的标签主要有以下几种类型： 文本框（Text）、隐藏域（Hidden）、密码框（Password）、单选框（Radio）、复选框（Checkbox）、下拉选择框（Select）、文件上传框（File）和文本区（TextArea）。 其中文本框、隐藏域、密码框、单选按钮、单选下拉选择框文本区使用request内置对象的getParameter方法获取标签内的数据，如果指定的标签名存在，但没有值， getParameter 返回空字符串；如果指定的标签名不存在，返回null。 复选框和多选下拉选择框使用request内置对象的getParameterValues方法获取包含选中选项的数组。,7.2.1 处理隐藏域标签,隐藏域标签语法如下： ,7.2.2 处理TextArea,处理的标签语法如下： 例sendTextArea.jsp用于输入数据文本 TextArea.jsp用于处理和显示结果,7.2.3 处理Radio标签,Radio标签的语法格式如下： ,7.2.4 处理Checkbox标签,Checkbox标签的语法如下： ,7.2.5 处理Select标签,Select标签的语法如下： 选项 ,7.2.6 JSP处理与Form相关的常用标签实例,userInfo.html包含表单。,文本输入标签（Text） ,密码输入标签（Password） ,单选按钮输入标签（Radio） 男 女,复选框输入标签（Checkbox） 看书 足球 旅游 听音乐 看电视,选择标签（Select） 10 20 21 30 31 40 41 65 ,showInfo.jsp用于处理从userInfo.html得到的用户数据，并在JSP页面中显示出来。,在showInfo.jsp中获取从userInfo.html传过来的数据的方式基本相同，都是先通过request.getParameter()方法得到传过来的字符串，然后进行处理。只有复选框输入标签（Checkbox()）传过来的数据处理不同，因为这个标签传过来的数据是字符串数组，所以必须使用request.getParameterValues()方法来得到这个字符串数组。,7.3 表单数据的类型转换,使用request对象的getParameter方法或者getParameterValues方法从表单中得到的数据可能是字符串类型或是字符串数组，在实际应用中常常需要得到其他类型，这就需要将字符串类型转换为需要的类型。 例如，下面的脚本段将字符串类型转换为整型： ,类型转化在JSP编程中经常用到，可以用一个工具类包装request对象的getParameter方法或者getParameterValues方法，直接返回期望的数据类型，这样可以省去每次都进行类型转换。 ParamUtils.java类是静态方法，这样就可以不用实例化，直接用类名调用相应的方法，以下是使用ParamUtils.java类获取表单数据的代码片断：,总结,可以总结出：表单即包括.之内的相关内容。 其中内部可以分三大类：input，select，textarea 一，首先看内部参数 参数name：用来表示该表单的唯一名称，方便一个页面建立多个表单而不混淆，当然更是为了接受页面的确认关系。 参数action：显而易见，是表示当前的表单中所有内容将送交某个页面去处理。处理包括接受信息，数据库比较，添加，修改等。 参数method：即表单的提交方法，含两种方法：post和get。post是传输信息内容，get是传输url值,二，再来看Input相关,Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。 1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的长度大小。 参数maxlength：输入框中允许输入字符的最大数。 参数value：输入框中的默认值 特殊参数readonly：表示该框中只能显示，不能添加修改。, your name: ,2，type=password 不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。 参数和“type=text”相类似。 your password: 密码长度小于15 ,3，type=file 当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：） 提供了一个文件目录输入的平台，参数有name，size。 your file: ,4，type=hidden 非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。 一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。 your hidden info here: alert(“隐藏域的值是 “+document.form1.yourhiddeninfo.value) ,5，type=button 标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码 your button: ,6，type=checkbox 多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。） a: b: c: name值可以不一样，但不推荐 a: b: c: ,7，type=radio 即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked. 不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。 a: b: c: 下面是name值不同的一个例子，就不能实现多选一的效果了 a: b: c: ,8，type=image 比较另类的一个，自己看看效果吧，可以作为提交式图片 your Imgsubmit: ,9，type=submit and type=reset 分别是“提交”和“重置”两按钮 submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。 ,三，接着再来看Select相关,Select主要要来做下拉菜单，跳转菜单，（下拉）列表。 其本身有内嵌代码.，option参数value值为传递被处理的值，option还有参数selected，表示默认被选中的。 1，下拉菜单 只是菜单式显示。 aaa bbb ccc alert(“菜单的默认选取值是 “+document.form1.selectwhat.value) ,2，跳转菜单,在下拉菜单基础上添加JavaScript成为跳转菜单。 网站连接 Cn-sec xj.chinavnet It365cn ,3，下拉列表,和下拉菜单最大的区别就是selec