JSP（JavaServer Pages）是一種在服務器端生成動態網頁的技術。AJAX（Asynchronous JavaScript and XML）幫助我們在不刷新整個頁面的情況下與服務器進行異步通信。本文將介紹如何使用AJAX在JSP頁面中發送JSON數據到服務端。
假設我們有一個簡單的網站，其中包含一個表單，用戶可以在該表單中輸入一些信息并將其提交給服務器。服務器需要處理這些數據，并返回一個響應給客戶端。
第一步：編寫HTML表單
<form id="myForm">
<input type="text" id="name" name="name" placeholder="請輸入您的姓名">
<input type="text" id="email" name="email" placeholder="請輸入您的電子郵件地址">
<input type="submit" value="提交">
</form>第二步：使用JavaScript監聽表單提交事件
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // 阻止表單提交的默認行為
// 創建一個JSON對象保存表單數據
var data = {
name: document.getElementById("name").value,
email: document.getElementById("email").value
};
// 調用發送AJAX請求的函數
sendAjaxRequest(data);
});第三步：編寫發送AJAX請求的函數
function sendAjaxRequest(data) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
// 在頁面上顯示服務器返回的響應信息
document.getElementById("response").innerHTML = response.message;
}
};
xhr.open("POST", "process.jsp", true);
xhr.setRequestHeader("Content-Type", "application/json");
// 將JSON對象轉換成字符串并發送給服務器
xhr.send(JSON.stringify(data));
}第四步：編寫處理請求的JSP頁面（process.jsp）
<%@ page language="java" contentType="application/json;charset=UTF-8" %>
<%@ page import="java.io.BufferedReader, java.io.IOException, java.io.InputStream, java.io.InputStreamReader, java.io.UnsupportedEncodingException" %>
<%@ page import="javax.servlet.ServletException, javax.servlet.annotation.WebServlet, javax.servlet.http.HttpServlet, javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse" %>
<%@ page import="org.json.JSONObject" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<%
// 讀取請求中的JSON數據
InputStream inputStream = request.getInputStream();
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream, StandardCharsets.UTF_8));
StringBuilder stringBuilder = new StringBuilder();
String line;
while ((line = bufferedReader.readLine()) != null) {
stringBuilder.append(line);
}
bufferedReader.close();
// 將JSON數據轉換成Java對象
JSONObject jsonRequest = new JSONObject(stringBuilder.toString());
// 處理邏輯
String name = jsonRequest.getString("name");
String email = jsonRequest.getString("email");
String message = "歡迎您，" + name + "！您的電子郵件地址是：" + email;
// 構造一個JSON對象作為響應
JSONObject jsonResponse = new JSONObject();
jsonResponse.put("message", message);
// 響應客戶端
PrintWriter out = response.getWriter();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
out.print(jsonResponse);
%>在這個例子中，當用戶提交表單時，JavaScript代碼會將表單數據封裝成一個JSON對象，并使用AJAX發送到服務端的process.jsp頁面。process.jsp頁面讀取請求中的JSON數據，并將其轉換成Java對象進行處理。然后，頁面構造一個JSON對象作為響應，并將其發送回客戶端。JavaScript代碼在接收到服務器的響應后，將相應的信息顯示在頁面上。
通過這種方式，我們可以實現在JSP頁面中發送JSON數據到服務器，實現與服務器的異步通信。利用AJAX，我們能夠不刷新整個頁面的情況下更新部分內容，提高用戶體驗。