3.4 编写用于输入查询信息的JSP页面

优质

小牛编辑

134浏览

2023-12-01

在本节将实现用于输入查询信息的query.jsp页面。在chapter3目录中建立一个query.jsp文件，并输入如下所示的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>输入查询信息</title>
    </head>
    <body>
         <!--  通过form提交查询信息  -->
        <form action="../QueryBook" method="post">
             <!--  使用table来控制页面元素的位置  -->
            <table style="font-size: 14px">
                <tr>
                   <td width="100px" align="right">                  
                       选择查询项：
                   </td>
                   <td>
                            <!--  显示查询项选择框  -->
                         <select name="queryField" style="width:100px">
                             <option value="name">书名</option>
                             <option value="author">作者</option>
                             <option value="isbn">ISBN</option>         
                         </select>
                   </td>
                </tr>
                <tr>   
                    <td align="right">
                         输入查询内容：
                    </td>
                    <td>
                            <!--  显示查询内容文本框  -->
                         <input type="text" name="queryText"/>
                    </td>
                </tr>
                <tr>   
                    <td></td>
                    <td>
                       <input type="submit" value="查询"/>
                    </td>
                </tr>
            </table>   
        </form>
    </body>
</html>

在编写上面的代码时应注意如下几点：

1. 通过form元素的action属性指定了“../QueryBook”来访问QueryBook。由于QueryBook的访问路径是/demo/QueryBook，而query.jsp的访问路径是/demo/chapter3/QueryBook，类此，需要action属性值需要加上“..”以加到上一层路径。

2. 在<select>元素的<option>子元素中使用value属性指定queryField请求参数的值。也就是说，在QueryBook中获得的queryField请求参数值就是相应的<option>元素的value属性值。

在IE地址栏中输入如下的URL来测试query.jsp页面：

http://localhost:8080/demo/chapter3/query.jsp

在访问上面的URL后，将在IE中显示如图3.5所示的界面：

图3.5 query.jsp页面

在【选择查询项】下拉列表框中选择【作者】，并在【输入查询内容】文本框中输入“布鲁克斯”，如图3.6所示。

图3.6 输入查询信息

在输入完查询信息后，单击【查询】按钮后，将会显示如图3.7所示的查询结果。

图3.7 显示查询结果