《使用JSP处理HTML表单.ppt》由会员分享，可在线阅读，更多相关《使用JSP处理HTML表单.ppt（52页珍藏版）》请在三一办公上搜索。
1、第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服务器再发送一个整理好的完整的 页面给客户，也就是我们在浏览器上看到的结果。客户和服务器间的通信协议可以用
2、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表单向J
3、SP引擎输入数据；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对象。,创建HTML表单,HTML表单的形式如下 一个表单有三个基本组成部分。表单标签:这里面包含了处理表单数据所用JS
4、P程序的URL以及数据提交到服务器的方法。表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。一个JSP页面中可以有多个表单，但是不能嵌套。,表单有以下三个重要的属性action属性：属性定义了当表单被提交时数据被送往何处，如果为空，就提交给当前页面。method属性：指定传输方式，GET或者POSTenctype属性：指定将数据回发到服务器时浏览器使用的编码类型。默认情况，这个编码格式是application/x-www
5、-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据在使用表单传送数据的时候，如果form 加了enctype=multipart/form-data 这个属性，那么表单请求传到另一个jsp或servlet 里时是不能用request.getParameter()来获取到各个表单元素的值的。是上传二进制数据,常用的web表单控件。总共有6类基本类型(不包括隐藏域等在页面中无法看到的)，如下图所示：,每个表单控件也都有各自的优缺点：1、文本框(Textfield)优点：对输入的内容几乎无任何限制;缺点：由于文本框过度发达的自
6、由无限制，导致它不能严格限制用户输入内容的类型(如：字符型，数字型等)，以及限制内容的长短;2、命令按钮(Button)优点：受益于按钮设计视觉上凸出的感觉，不光如此许多有凸出感的图片也会导致大量的用户点击(这是题外话了);缺点：受制于按钮区域的限制，不能做得太长，谁见放两三行文字的按钮呢?因此，按钮内的文案需要简洁明了。3、多选框(Checkbox)优点：类似于读书考试时候做的多选题，可选择多个选项。还记得那个万恶的说明：选对一个给半分，选错一个不给分;缺点：如果多选框过多，占用大量的空间。在空间紧张的时候要作合理的安排。,4、单选框(Radio Button)优点：这也是从考试时的单选题来
7、的，比多选框好些，每组最多只选择一个选项;缺点：和多选框一样，如果选项过多，会占用大量的空间;5、下拉列表(List/Menu)如果说多选框与单选框是浪费空间的大户，下拉列表则恰巧与前两者相反。它节省空间又可有数量庞大的下拉选项，真是小而强。优点：在空间有限的情况下，使用此小而强的控件，可以展示更多选项内容。比较常见的就是国家的下拉列表;缺点：由于小而强过于节省空间，导致当下拉列表选项过多时。会让选择的人找不到要选择的选项;6、文本域(File Field)上传文件之用，左边的那个灰色输入框有时候会让人很迷惑：先输入文字再点浏览文件?,在B/S应用程序中，前台与后台的数据交互，都是通过HTML
8、中Form表单完成的。Form提供了两种数据传输的方式get和post。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响。虽然为了方便的得到变量值，Web容器已经屏蔽了二者的一些差异，但是了解二者的差异在以后的编程也会很有帮助的。Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：,7.1.3 使用GET/POST方法传递参数,1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。2、Get将表单中数据的按照variable=value的形式，添加到action所指向的U
9、RL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。3、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。,4、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传
10、文件只能使用Post。5、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。6、Get是Form的默认方法。,第一种 GET 它将表单内容附加URL之后，中间用问号连接，然后传送至指定的程序做处理。在hello user 实例中，使用的是GET进行数据传送，表单数据传给hellouser.jsp页面的方式如下：http:/hellouser.jsp?username=liuyongpo因为hellouser.jsp页面接收到数据后重定向到了response.jsp页面，所以地址栏看不到上述信息。第二种 POST，这个方法是将表单内容作为一个数据体
11、而不是URL的一部分传送给服务器的。所以URL中看不到表单的内容。,另外用get方法传递中文有问题，用post没有问题。pageEncoding这个只对post起作用。get方法提交时，大家可以从地址栏里看到提交的参数，这是因为get方法传递是作为报文头提交的，而pageEncoding对报文头是没有作用的，所以仍然按照 iso8859-1编码，才出现了乱码问题。而post提交的是form表单的内容，pageEncoding指定了它的编码，所以他会按照指定编码传递。,7.1.4 使用JavaBean处理表单数据,HTML表单的数据传到JavaBean里需要两个工作：第一个工作用标签创建或者定位
12、到JavaBean，第二个工作在JavaBean里面用设置属性值。,7.1.5 将处理结果返回给客户端,用户将数据传到JavaBean，一旦想重新得到数据，并在JSP页面中显示出来，就要将处理结果返回给客户端。要实现这一步，则需要标签：另外，还可以使用表达式直接调用Bean中的方法获得属性值：,7.2 与Form相关的常用标签的处理方法,FORM中常用的标签主要有以下几种类型：文本框（Text）、隐藏域（Hidden）、密码框（Password）、单选框（Radio）、复选框（Checkbox）、下拉选择框（Select）、文件上传框（File）和文本区（TextArea）。其中文本框、隐藏域
13、、密码框、单选按钮、单选下拉选择框文本区使用request内置对象的getParameter方法获取标签内的数据，如果指定的标签名存在，但没有值，getParameter 返回空字符串；如果指定的标签名不存在，返回null。复选框和多选下拉选择框使用request内置对象的getParameterValues方法获取包含选中选项的数组。,7.2.1 处理隐藏域标签,隐藏域标签语法如下：,7.2.2 处理TextArea,处理的标签语法如下：例sendTextArea.jsp用于输入数据文本 TextArea.jsp用于处理和显示结果,7.2.3 处理Radio标签,Radio标签的语法格式如下
14、：,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.js
15、p中获取从userInfo.html传过来的数据的方式基本相同，都是先通过request.getParameter()方法得到传过来的字符串，然后进行处理。只有复选框输入标签（Checkbox()）传过来的数据处理不同，因为这个标签传过来的数据是字符串数组，所以必须使用request.getParameterValues()方法来得到这个字符串数组。,7.3 表单数据的类型转换,使用request对象的getParameter方法或者getParameterValues方法从表单中得到的数据可能是字符串类型或是字符串数组，在实际应用中常常需要得到其他类型，这就需要将字符串类型转换为需要的类型。
16、例如，下面的脚本段将字符串类型转换为整型：,类型转化在JSP编程中经常用到，可以用一个工具类包装request对象的getParameter方法或者getParameterValues方法，直接返回期望的数据类型，这样可以省去每次都进行类型转换。ParamUtils.java类是静态方法，这样就可以不用实例化，直接用类名调用相应的方法，以下是使用ParamUtils.java类获取表单数据的代码片断：,总结,可以总结出：表单即包括.之内的相关内容。其中内部可以分三大类：input，select，textarea一，首先看内部参数参数name：用来表示该表单的唯一名称，方便一个页面建立多个表单而
17、不混淆，当然更是为了接受页面的确认关系。参数action：显而易见，是表示当前的表单中所有内容将送交某个页面去处理。处理包括接受信息，数据库比较，添加，修改等。参数method：即表单的提交方法，含两种方法：post和get。post是传输信息内容，get是传输url值,二，再来看Input相关,Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默
18、认类型。参数name：同样是表示的该文本输入框名称。参数size：输入框的长度大小。参数maxlength：输入框中允许输入字符的最大数。参数value：输入框中的默认值特殊参数readonly：表示该框中只能显示，不能添加修改。,your name:,2，type=password不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。your password:密码长度小于15,3，type=file当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）提供了一个文件目录输入的平台，参数有name，size。yo
19、ur 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多选框，常见于注册时选择爱好、性格、等信息。参数有n
20、ame,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比较另类的一个，自己看看效果吧，可以作为提交式图片you
21、r Imgsubmit:,9，type=submit and type=reset分别是“提交”和“重置”两按钮submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。,三，接着再来看Select相关,Select主要要来做下拉菜单，跳转菜单，（下拉）列表。其本身有内嵌代码.，option参数value值为传递被处理的值，option还有参数selected，表示默认被选中的。1，下拉菜单只是菜单式显示。aaa bbb cccalert(菜单的默认选取值是+document.form1.selectwhat.value),2，跳转菜单,
22、在下拉菜单基础上添加JavaScript成为跳转菜单。网站连接Cn-secxj.chinavnetIt365cn,3，下拉列表,和下拉菜单最大的区别就是select多了一个size值，该值并非长度大小，而是列表的上下高度。当然还有更主要的是：菜单只能选一个，而列表可以选多个，该特殊参数为multiplesize=1简直就是一个下拉菜单 aaa bbb ccc,size1你会发现了大不同 aaa bbb ccc,加入了multiple发现可以多个选择了，包括Shift进行快速全选及Ctrl进行点选 aaa bbb ccc,四，最后关注的Textarea,可以将Textarea文本区域理解为扩大化
23、了的文本输入框。其参数没有value，默认值设定在.之间。其它参数还有rows,表示文本区域的行数；参数cols，表示文本区域的列数。还有参数warp，当warp=off表示该文本区域中的不自动换行，当然不写默认是自动换行的。5行20列，不自动换行,网页表单字段的验证方式,在网页表单字段的验证过程中，可以在两个地方进行把关，如下所示：客户端表单字段验证：客户端字段验证是指在尚未送到服务器前，在客户端的浏览程序进行检查，目前来说，主要是使用JavaScript。服务器端表单字段验证：相对于客户端的字段验证，服务器端的表单字段验证是在数据送到伺服端后，才进行数据检查，也就是使用JSP程序代码进行字段检查。,服务器端的表单字段验证-说明,JSP程序在取得窗体字段值后，在真正处理前，可以使用if条件叙述来检查使用者输入的字段数据是否正确，或是忘了输入指定的字段数据。如果输入的数据错误，JSP程序并不会进行处理，而是显示错误讯息，然后回到窗体网页要求使用者重新输入。,服务器端的表单字段验证-图例,表单处理开始,表单Form,传到JSP页面,表单是否输入错误,执行表单处理,false,true,
