如何使用JSP实现一个页面中点击查询，在本页面下面显示结果

时间: 2023-06-27 21:07:20 浏览: 456

frame之间以及子页面和父页面间参数传递

4星 · 用户满意度95%

### Frame之间及子页面与父页面间的参数传递在Web开发中，特别是在使用JSP（Java Server Pages）技术时，经常需要实现不同`frame`之间的数据交互或子页面与父页面之间的参数传递。这种功能在实际应用中非常常见，比如在主页面中选择一个选项时，需要动态更新嵌入的子页面内容等场景。 #### 基础概念在讨论具体的实现方法之前，我们先来了解一下基本的概念： - **Frame**：HTML中的`<frame>`元素用于定义单个窗口中的文档显示区域。通常与`<frameset>`一起使用来定义多个文档显示区域。 - **Iframe**：`<iframe>`（Inline Frame）是HTML5中的元素，用来在当前页面内嵌入另一个HTML文档。它可以在不离开当前页面的情况下展示其他网页内容。 - **Parent Page**：父页面指的是包含`frame`或`iframe`的页面。 - **Child Page**：子页面则是被`frame`或`iframe`加载的页面。 #### 实现方法在JSP中实现`frame`之间或子页面与父页面之间的参数传递主要通过JavaScript来完成。下面将详细介绍几种常见的实现方式： 1. **直接访问DOM元素**： - **从父页面访问子页面**：在父页面中可以通过`document.frames["iframeID"].document.getElementById("elementID")`的方式获取到子页面中的元素。例如，在示例代码中，`getChildEl()`函数通过`document.frames("inner").document.getElementById("text1.inner").value`获取到了子页面中ID为`text1.inner`的文本框的值。 - **从子页面访问父页面**：子页面可以通过`parent.document.getElementById("elementID")`来访问父页面中的DOM元素。如示例中的`getParentEl()`函数，通过`parent.document.getElementById("text1.outter").value`获取到了父页面中ID为`text1.outter`的文本框的值。 2. **使用postMessage方法**： - `postMessage`是一种跨源消息传递API，可以实现在不同来源的`window`对象之间发送消息。这种方法可以避免跨域限制问题。 - 使用步骤包括： 1. **发送方**调用`window.postMessage`方法发送消息。 2. **接收方**监听`message`事件并处理接收到的消息。 3. **URL参数传递**： - 可以通过修改URL中的查询字符串来传递参数。这种方法简单易用，但不适合传输大量数据或敏感信息。 4. **使用Cookie或LocalStorage**： - 对于需要持久化的数据，可以考虑使用Cookie或LocalStorage进行存储。这种方式适用于需要跨页面共享数据的场景。 5. **利用服务器端转发**： - 如果涉及到更复杂的数据交互逻辑，可以利用服务器端的转发机制。例如，在JSP中可以通过`request.getRequestDispatcher("/targetPage.jsp").forward(request, response);`来转发请求，并在目标页面中通过`request.getParameter()`等方法获取传递过来的参数。 #### 示例代码解析在提供的示例代码中，父页面和子页面分别使用了简单的JavaScript函数实现了相互之间的元素访问。这种直接访问DOM元素的方法简单直接，适合在同源策略允许的情况下使用。 - **父页面**： ```html <input type="button" value="获取子页面文本" onclick="getChildEl()"/> ``` 当点击按钮时，会触发`getChildEl()`函数，该函数通过`document.frames("inner").document.getElementById("text1.inner").value`获取子页面中的文本框值。 - **子页面**： ```html <input type="button" value="获取父页面文本" onclick="getParentEl()"/> ``` 同样地，当点击按钮时，会触发`getParentEl()`函数，该函数通过`parent.document.getElementById("text1.outter").value`获取父页面中的文本框值。 #### 总结通过上述介绍，我们可以看到在JSP页面中实现`frame`之间或子页面与父页面之间的参数传递有多种方法，每种方法都有其适用场景。在实际开发过程中，可以根据具体需求选择合适的技术方案。

要使用JSP实现这个功能，你可以按照以下步骤进行： 1. 在页面上添加一个查询表单，用户输入查询条件。 2. 在JSP页面上处理表单提交，获取查询条件。 3. 使用Java代码执行查询操作并获取查询结果。 4. 将查询结果显示在页面下方的表格中。以下是一个简单的示例代码： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>查询结果</title> </head> <body> <form method="post" action="${pageContext.request.contextPath}/query.jsp"> <label>查询条件：</label> <input type="text" name="keyword" /> <input type="submit" value="查询" /> </form> <%-- 处理查询结果 --%> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <% // 获取查询条件 String keyword = request.getParameter("keyword"); if(keyword == null) { keyword = ""; } // 执行查询操作 List<User> userList = UserDao.query(keyword); // 显示查询结果 for(User user : userList) { %> <tr> <td><%=user.getName()%></td> <td><%=user.getAge()%></td> <td><%=user.getGender()%></td> </tr> <% } %> </table> </body> </html> ``` 在这个示例代码中，我们首先使用一个表单让用户输入查询条件。表单的提交地址是query.jsp。在query.jsp中，我们先获取表单中提交的查询条件，然后使用UserDao.query方法执行查询操作，并将查询结果显示在页面下方的表格中。当用户点击查询按钮时，表单会提交到query.jsp页面，并执行上述操作。

阅读全文

如何使用JSP实现一个页面中点击查询，在本页面下面显示结果

相关推荐

使用JSP和JavaBean实现数据库分页查询

Java与Ajax实现JSP页面动态刷新

在JSP页面中实现检索数据的分页显示.doc

Ajax+Servlet+Jsp实现页面无刷新查询学生成绩系统

NetBeans连接SQL设计查询JSP页面和修改JSP页面实现数据的查询和修改

如何在JSP中设置从登录页面通过点击链接跳转到注册页面，并在注册页面显示相应的注册信息？

使用ajax技术，将servlet跳转的jsp内容显示在本页面中

如何在jsp页面中实现点击下拉选选框显在原有的页面上弹出一个窗口，这个窗口是存放图片，弹窗要有一个关闭的按键，点击关闭就可以关闭弹窗界面，然后回到原界面

新建一个商店页面shop.jsp，里面显示若干商品，每个商品下面有放入购物车按钮，最后在页面右上角点击“查看购物车”可以显示自己放入购物车的商品列表内容。

使用jsp和javabean，实现用户注册、登录功能要求:设计一个注册页面,用户填写的信息包括:姓名、性别、 年龄、学院、专业、个人介绍等,用户点击注册后将注册信息通过 output.jsp 显示出来

用单个JSP页面实现一个简单的页面处理小功能；功能自定。

创建一个jsp页面在页面中用户输入自己的身份证号提交后在页面上输出

最新推荐

JavaWeb 中Cookie实现记住密码的功能示例

教师节主题班会.pptx

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？

使用jsp和javabean，实现用户注册、登录功能要求:设计一个注册页面,用户填写的信息包括:姓名、性别、年龄、学院、专业、个人介绍等,用户点击注册后将注册信息通过 output.jsp 显示出来