在 JSP 页面中通过 AJAX 向
另一个 JSP 页面
传递
数据，可以使用 jQuery 的 `$.ajax` 或 `$.post` 方法发送异步请求，并将
数据以 JSON 格式提交到目标页面。接收方可以通过服务器端脚本（如 Java）处理并返回响应。
### 使用 jQuery 发送 AJAX 请求
以下是
一个典型的 jQuery `POST` 请求示例，用于将
数据从
一个 JSP 页面发送到
另一个 JSP 页面：
```jsp
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#sendData").click(function () {
var dataToSend = {
param1: "value1",
param2: "value2"
};
$.post("target.jsp", dataToSend, function (response) {
$("#result").
html(response);
});
});
});
</script>
<button id="sendData">发送
数据</button>
<div id="result"></div>
```
上述代码中，当用户点击“发送
数据”按钮时，会将 `dataToSend` 对象作为参数发送至 `target.jsp` 页面。目标页面接收到这些
数据后，可以进行相应的处理并返回结果。
### 在目标 JSP 页面中获取
数据
在目标 JSP 页面中，可以通过 `request.getParameter()` 获取前端
传入的
数据，并将其输出或进行业务逻辑处理：
```jsp
<%
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
out.println("接收到的参数：");
out.println("param1 = " + param1);
out.println("param2 = " + param2);
%>
```
该段代码接收了两个参数 `param1` 和 `param2`，并通过 `out.println` 将其输出。AJAX 请求成功后，这些内容会被插入到前端页面的 `#result` 元素中。
### 通过 JSON 格式
传递结构化
数据
如果需要
传递更复杂的结构化
数据，可以将
数据格式化为 JSON 字符串并在目标页面中解析：
```javascript
var jsonData = JSON.stringify({
user: "testUser",
items: ["item1", "item2"]
});
$.ajax({
url: "target.jsp",
type: "POST",
data: { jsonData: jsonData },
success: function(response) {
$("#result").
html(response);
}
});
```
在目标 JSP 页面中解析 JSON
数据：
```jsp
<%
String jsonData = request.getParameter("jsonData");
// 假设使用 org.json.JSONObject 进行解析
JSONObject obj = new JSONObject(jsonData);
String user = obj.getString("user");
JSONArray items = obj.getJSONArray("items");
out.println("用户：" + user);
out.println("物品列表：");
for (int i = 0; i < items.length(); i++) {
out.println(items.getString(i));
}
%>
```
### 使用表单序列化方式
传递
数据
若需将整个表单
数据一次性提交，可使用 `serialize()` 方法自动收集所有具有 `name` 属性的输入
值：
```jsp
<form id="myForm">
<input type="text" name="username" value="JohnDoe">
<input type="email" name="email" value="john@example.com">
</form>
<button id="submitForm">提交表单</button>
<script>
$("#submitForm").click(function () {
var formData = $("#myForm").serialize();
$.post("target.jsp", formData, function (response) {
$("#result").
html(response);
});
});
</script>
```
在目标 JSP 页面中直接获取参数：
```jsp
<%
String username = request.getParameter("username");
String email = request.getParameter("email");
out.println("用户名：" + username);
out.println("邮箱：" + email);
%>
```
以上方法均适用于在 JSP 页面之间通过 AJAX
传输
数据[^4]。
---
本文介绍了如何在HTML页面间传递参数的具体实现方法，包括直接通过URL hash传递多个值，并在目标页面中解析这些值。
扫一扫
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
