標簽：

html
<div id="productDetails"></div>

2. 接下來，在JavaScript中使用AJAX來獲取數據，并將返回的結果顯示在頁面上。我們可以使用jQuery庫來簡化AJAX的操作：

javascript
$(document).ready(function() {
$.ajax({
url: 'getProductDetails.jsp',  // 請求的URL
type: 'GET',  // 請求類型為GET
success: function(response) {  // 請求成功時的回調函數
$('#productDetails').html(response);  // 將返回的結果顯示在頁面上
},
error: function() {  // 請求失敗時的回調函數
$('#productDetails').html('Error occurred.');  // 顯示錯誤信息
}
});
});

在上述代碼中，我們首先通過$(document).ready(function() { ... })來確保頁面加載完成后再執行代碼。然后，我們使用$.ajax({ ... })函數來發送AJAX請求。其中，url指定了服務器端的處理請求的頁面，type指定了請求的類型，success是請求成功時的回調函數，error是請求失敗時的回調函數。在success回調函數中，我們通過$('#productDetails').html(response)來將返回的結果顯示在頁面的productDetails區域。
3. 在服務器端的getProductDetails.jsp頁面中，我們需要獲取商品的詳細信息，并將其返回給AJAX調用。例如，我們可以通過數據庫查詢獲取商品的名稱、價格等信息，并將其以HTML的形式返回給AJAX調用：

jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%
// 連接數據庫
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "username", "password");
Statement stmt = conn.createStatement();
// 查詢商品的詳細信息
ResultSet rs = stmt.executeQuery("SELECT name, price FROM products WHERE id = " + request.getParameter("productId"));
if (rs.next()) {
// 將商品詳細信息以HTML的形式返回
out.println("<p>商品名稱：" + rs.getString("name") + "</p>");
out.println("<p>商品價格：" + rs.getDouble("price") + "</p>");
} else {
out.println("<p>商品不存在。</p>");
}
// 關閉數據庫連接
rs.close();
stmt.close();
conn.close();
%>

在上述代碼中，我們首先通過Connection和Statement類來連接數據庫，并執行查詢語句，獲取商品的詳細信息。然后，我們通過out.println()將商品的詳細信息以HTML的形式返回給AJAX調用。
通過以上步驟，我們就實現了通過AJAX獲取數據并將其顯示在JSP頁面上的功能。無論是顯示商品的詳細信息，還是顯示其他類型的數據，都可以通過類似的方式來實現。AJAX為我們在Web開發中提供了更加靈活和動態的數據顯示方式，能夠大大提升用戶體驗。