使用JSP处理HTML表单

第7章使用JSP处理HTML表单 7 1在JSP中创建与处理HTML表单7 2与Form相关的常用标签的处理方法7 3表单数据的类型转换 7 1在JSP中创建与处理HTML表单 首先 JSP引擎把存放在request对象中的数据发到JSP页面指定的服务器端的组件 JavaBeans组件 servlet 或者enterprisebean 组件收到这些个数据以后 有可能再把这些数据存到数据库或者其他的地方存放起来 同时 返回一个response对象给JSP引擎 这时JSP引擎和Web服务器再发送一个整理好的完整的页面给客户 也就是我们在浏览器上看到的结果 客户和服务器间的通信协议可以用HTTP 当然也可以用其他协议 Client request response JSPContainer WebServer JSPFile request response Component response request 图7 1数据流在服务器和客户之间的传递 7 1 1一个动态交互的hellouser实例 下面是一个简单的动态交互的hellouser实例 该实例共包含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或者POSTenctype属性 指定将数据回发到服务器时浏览器使用的编码类型 默认情况 这个编码格式是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 单选框 RadioButton 优点 这也是从考试时的单选题来的 比多选框好些 每组最多只选择一个选项 缺点 和多选框一样 如果选项过多 会占用大量的空间 5 下拉列表 List Menu 如果说多选框与单选框是浪费空间的大户 下拉列表则恰巧与前两者相反 它节省空间又可有数量庞大的下拉选项 真是小而强 优点 在空间有限的情况下 使用此小而强的控件 可以展示更多选项内容 比较常见的就是国家的下拉列表 缺点 由于小而强过于节省空间 导致当下拉列表选项过多时 会让选择的人找不到要选择的选项 6 文本域 FileField 上传文件之用 左边的那个灰色输入框有时候会让人很迷惑 先输入文字再点浏览文件 在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在hellouser实例中 使用的是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 6JSP处理与Form相关的常用标签实例 userInfo html包含表单 文本输入标签 Text 密码输入标签 Password 单选按钮输入标签 Radio 男女 复选框输入标签 Checkbox 看书足球旅游听音乐看电视 选择标签 Select 10 2021 3031 4041 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 表示该框中只能显示 不能添加修改 yourname 2 type password不用我说 一看就明白的密码输入框 最大的区别就是当在此输入框输入信息时显示为保密字符 参数和 type text 相类似 yourpassword 密码长度小于15 3 type file当你在BBS上传图片 在EMAIL中上传附件时一定少不了的东西 提供了一个文件目录输入的平台 参数有name size yourfile 4 type hidden非常值得注意的一个 通常称为隐藏域 如果一个非常重要的信息需要被提交到下一页 但又不能或者无法明示的时候 一句话 你在页面中是看不到hidden在哪里 最有用的是hidden的值 yourhiddeninfohere alert 隐藏域的值是 document form1 yourhiddeninfo value 5 type button标准的一windows风格的按钮 当然要让按钮跳转到某个页面上还需要加入写JavaScript代码yourbutton 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比较另类的一个 自己看看效果吧 可以作为提交式图片yourImgsubmit 9 type submitandtype reset分别是 提交 和 重置 两按钮submit主要功能是将Form中所有内容进行提交action页处理 reset则起个快速清空所有填写内容的功能 三 接着再来看Select相关 Select主要要来做下拉菜单 跳转菜单 下拉 列表 其本身有内嵌代码 option参数value值为传递被处理的值 option还有参数selected 表示默认被选中的 1 下拉菜单只是菜单式显示 aaabbbcccalert 菜单的默认选取值是 document form1 selectwhat value 2 跳转菜单 在下拉菜单基础上添加JavaScript成为跳转菜单 网站连接 Cn secxj chinavnetIt365cn 3 下拉列表 和下拉菜单最大的区别就是select多了一个