Java Web程序开发范例宝典
上QQ阅读APP看书,第一时间看更新

第1章 表单的应用

1.1 获取提交的表单元素的值

通过Form提交表单元素的值在JSP中是比较常用的技术,本节将介绍获取Form表单元素值的常用方法。

实例001 获取文本字段/文本区域/隐藏域的值

本实例是一个提高基础技能的实例

实例位置:光盘\mingrisoft\01\001

实例说明

获取文本字段/文本区域/隐藏域的值在实际Web编程中会经常遇到。本实例将介绍通过在网页中的文本字段、文本区域输入数据后,单击“提交”按钮获取文本字段、文本区域以及隐藏域的数据的方法。实例运行结果如图1.1和图1.2所示。

图1.1 输入数据

图1.2 获取数据

技术要点

(1)文本字段text。

文本字段text用来设定在表单的文本域中输入任何类型的文本、数字或字母。输入的内容以单行的形式显示。

基本语法:

    <input name="textOne" type="text" maxlength=value size= value value= value >

文本字段的属性如表1.1所示。

表1.1 文本字段的属性

(2)文本区域textarea。

文本区域textarea用来制作多行的文本区域,可以在其中输入更多的文本。

基本语法:

    <textarea name="textTwo" cols="30" rows="8" ></textarea>

文本区域的属性如表1.2所示。

表1.2 文本区域的属性

(3)隐藏域hidden。

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的是接收或发送信息。浏览者单击“提交”按钮提交表单时,隐藏域的信息也被一起发送到服务器。

基本语法:

    <input name="textThree" type="hidden" value="男">

隐藏域的属性如表1.3所示。

表1.3 隐藏域的属性

注意:隐藏域不会显示结果,只是用于传送数据的标记。

实现过程

(1)文本字段/文本区域/隐藏域所在的Form表单的代码如下:

        <form name="form" method="post" action="dealwith.jsp" onSubmit="return checkEmpty(form)">
        <table width="377" border="1" cellpadding="1" cellspacing="1">
            <tr>
                <td height="41" colspan="2">文本字段/文本区域/隐藏域的值</td>
            </tr>
            <tr>
                <td width="111" height="20" ><font color="#FFFFFF">文本字段:</font></td>
                <td width="256"><input name="textOne" type="text"></td>
            </tr>
            <tr>
                <td height="119" align="right"><font color="#FFFFFF">文本区域:</font></td>
                <td><textarea name="textwo" cols="30" rows="8" ></textarea></td>
            </tr>
            <tr>
                <td height="26" align="right"><font color="#FFFFFF">隐藏域的值:</font></td>
                <td><font color="#FFFFFF">&nbsp;软件、图书</font>
                <input name="textThree" type="hidden" value="软件、图书"></td>
            </tr>
            <tr>
                <td height="26" colspan="2"><input type="submit" name="Submit" value="提交"></td>
            </tr>
        </table>
        </form>

(2)获取文本字段/文本区域/隐藏域代码如下:

        <%request.setCharacterEncoding("gbk");%>
        <table width="352">
          <tr>
        <td height="50" colspan="2">获取文本字段/文本区域/隐藏域的值</td>
        </tr>
          <tr>
        <td width="110" height="20" ><font color="#FFFFFF" class="word_gray">文本字段的值:</font></td>
        <td width="226"><font color="#FFFFFF"><%=request.getParameter("textOne")%></font></td>
          </tr>
          <tr>
            <td height="80" ><font color="#FFFFFF">文本区域的值:</font></td>
            <td><%=request.getParameter("textwo")%></font></td>
          </tr>
          <tr>
            <td height="26"><font color="#FFFFFF">隐藏域的值:</font></td>
            <td><font color="#FFFFFF"><%=request.getParameter("textThree")%></font></td>
          </tr>
          <tr>
            <td height="31" colspan="2"><a href="index.jsp"><font color="#FFFFFF">返回</font></a></td>
          </tr>
        </table>

举一反三

根据本实例,读者可以:

获取用户注册信息;

获取商品录入信息。

实例002 获取单选按钮的值

本实例是一个实用的程序

实例位置:光盘\mingrisoft\01\002

实例说明

在填写图书反馈信息时,浏览者需要选择反馈意见,由于反馈意见是唯一的,因此应在网页中使用单选按钮。实例运行结果如图1.3和图1.4所示。

图1.3 选择单选按钮的值

图1.4 获取单选按钮的值

技术要点

单选按钮能够进行项目的单项选择,用一个圆框表示。

基本语法:

        <input type="radio" name="name" value=" value" checked>

单选按钮的属性如表1.4所示。

表1.4 单选按钮的属性

实现过程

(1)单选按钮所在的Form表单的代码如下:

        <%
        String book[]={"经典之作","非常精彩","音质很差,画面不清","内容新颖,构思巧妙","很一般"};
        int number=book.length;                                //获取数组的长度
        %>
        <form name="form" method="post" action="dealwith.jsp" onSubmit="return checkEmpty(form)">
            <table width="276">
              <tr>
                <td width="266">请选择您对本视频的满意程度:</td>
              </tr>
              <%
                  for(int i=0;i<book.length;i++){              //根据数组的长度,循环输出数组的值
              %>
              <tr>
                  <td align="left"><input type="radio" name="name" value="<%=book[i]%>"><%=book[i]%>
              </tr>
        <%}%>
            </table>
            <input type="submit" name="Submit" value="提交">
            </form>

(2)获取单选按钮值的代码如下:

        <table width="211" border="0">
            <tr><td width="226">您选择为:</td></tr>
            <tr><td width="226"><%=request.getParameter("name")%></td></tr>
        </table>

举一反三

根据本实例,读者可以:

在用户注册信息中应用单选按钮;

在商品添加中应用单选按钮。

实例003 获取复选框的值

这是一个提高基础技能的实例

实例位置:光盘\mingrisoft\01\003

实例说明

浏览者填写表单时,有一些内容可以让浏览者以选择的形式来实现。例如常见的网上调查,首先提出调查的问题,然后让浏览者在若干选项中进行选择;收集个人信息时,要求在个人爱好的选项中进行选择等。本实例将通过对“视频的满意程度”的调查,介绍如何获取复选框中的值,运行结果如图1.5和图1.6所示。

图1.5 选择复选框

图1.6 获取复选框的值

技术要点

选择框分为两种,即复选框和单选按钮。

复选框:可以在若干选项中选择多个项目。

单选按钮:在若干选项中只允许选择一项。

复选框能够进行项目的多项选择,用一个方框表示。

基本语法:

        <input type="checkbox" name="name<%=i%>" value="value">

复选框的属性如表1.5所示。

表1.5 复选框的属性

实现过程

(1)复选框所在的Form表单的代码如下:

        <%
            String bookType[]={"经典之作","非常精彩","音质很差,画面不清","内容新颖,构思巧妙","很一般"};
            int number=bookType.length;    //获取数组的长度
        %>
        <form name="form" method="post" action="dealwith.jsp" onSubmit="return checkEmpty(form)">
            <table width="276">
            <%
                for(int i=0;i<bookType.length;i++){                    //循环输出数组中的数据
            %>
                <tr>
                    <td>
                        <input type="checkbox" name="name<%=i%>" value="<%=bookType[i]%>"><%=bookType[i]%>
                    </td>
                </tr>
            <%}%>
                </table>
                <input type="hidden" name="number" value="<%=bookType.length%>">
                <input type="submit" name="Submit" value="提交">
        </form>

(2)获取复选框的值的代码如下:

        <%
            request.setCharacterEncoding("gbk");                             //实现编码转换
            int number=Integer.parseInt(request.getParameter("number"));      //获取隐藏域中提交的值
        %>
        <table width="236" height="83" border="0">
            <tr><td width="226">您的选择:</td></tr>
            <%
                for(int i=0;i<number;i++){                                    //循环输出提交的数据
                    String name="name"+i;
                    if(request.getParameter(name)!=null){
            %>
            <tr>
                <td width="226" align="left"><%=request.getParameter(name)%></td>
            </tr>
            <%}}%>
        </table>

举一反三

根据本实例,读者可以:

开发图书类别的投票系统;

开发新闻类别的投票系统。

实例004 获取下拉列表/菜单的值

本实例是一个提高基础技能的实例

实例位置:光盘\mingrisoft\01\004

实例说明

在填写有关图书的表单信息时,浏览者需要选择喜欢的JSP图书,这时图书名称会出现在下拉列表框中,供浏览者选择。下拉列表/菜单是为节省网页空间而产生的。在本实例中,通过在网页中的下拉列表/菜单选择内容,单击“提交”按钮,获取下拉列表/菜单的值,运行结果如图1.7和图1.8所示。

图1.7 选择下拉列表/菜单的内容

图1.8 获取下拉列表/菜单的值

技术要点

下拉列表可以显示一定数量的选项,如果超出了这个数量,会自动出现滚动条,浏览者可以通过滚动条查看各选项。

通过HTML标记<select>和<option>设计页面中的下拉列表/菜单的效果。

基本语法:

        <select name="select" size=value multiple="multiple">
          <option value= value selected>请选择</option>
        </select>

下拉列表/菜单的属性如表1.6所示。

表1.6 下拉列表/菜单的属性

实现过程

(1)下拉列表/菜单所在的Form表单的代码如下:

        <form name="form" method="post" action="dealwith.jsp">
        <table width="270" border="0">
                  <tr>
                    <td width="182">
                        <select name="select">
                        <option value="">请选择</option>
                        <option value="JSP数据库开发完全手册">JSP数据库开发完全手册</option>
                        <option value="JSP数据库案例精选">JSP数据库案例精选</option>
                        <option value="Java数据库案例精选">Java数据库案例精选</option>
                        <option value="JSP范例宝典">JSP范例宝典</option>
                        <option value="JSP技术大全">JSP技术大全</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>

(2)获取下拉列表/菜单中值的代码如下:

        <%request.setCharacterEncoding("gbk");%>
        <table width="352" border="0">
            <tr>
              <td width="165" height="20">获取下拉列表/菜单的的值:</td>
              <td width="177"><%=request.getParameter("select")%></td>
            </tr>
        </table>

举一反三

根据本实例,读者可以:

获取城市的名称;

获取各种书籍的类型名称。