Ajax（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行數據交換的技術，可以實現無需刷新整個頁面就能實現數據的添加和修改。通過使用Ajax，可以在同一頁面上實現數據的實時更新，提高了用戶體驗和操作的便利性。本文將以舉例的方式介紹如何使用Ajax實現在同一頁面上進行數據的添加和修改。 對于數據的添加和修改，我們可以采用同樣的頁面進行處理。用戶可以在頁面上輸入數據，然后通過點擊不同的按鈕來實現添加或修改操作。當用戶點擊添加按鈕時，頁面將發送一個Ajax請求到服務器，并將用戶輸入的數據作為參數傳遞給服務器端。服務器端通過處理請求，將數據保存到數據庫中，并返回相應的響應結果。客戶端根據返回的結果，可以在頁面上顯示添加成功的提示信息。同樣，當用戶點擊修改按鈕時，頁面也會通過Ajax將數據發送到服務器進行處理。服務器根據請求的參數，修改數據庫中的對應記錄，并返回相應的響應結果。客戶端根據返回的結果，在頁面上顯示修改成功的提示信息。 下面我們以添加用戶信息為例，演示如何使用Ajax在同一頁面上實現添加和修改的功能。首先，在頁面上添加一個表單用于輸入用戶信息。用戶在表單中輸入姓名、年齡和性別，并點擊添加按鈕進行添加，或者選擇已存在的用戶記錄并點擊修改按鈕進行修改。頁面代碼如下：

<form id="userForm"><label for="name">姓名：</label><input type="text" name="name">
<label for="age">年齡：</label><input type="number" name="age">
<label for="gender">性別：</label><input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<button id="addBtn">添加</button><button id="modifyBtn">修改</button></form>

上述代碼定義了一個表單，包含了輸入姓名、年齡和性別的字段，以及添加和修改按鈕。接下來，我們使用JavaScript代碼來處理表單的提交事件，并將數據發送到服務器。

<script>document.getElementById("addBtn").onclick = function() {
var formData = new FormData(document.getElementById("userForm"));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/addUser", true);
xhr.onload = function() {
if (xhr.status === 200) {
alert("添加成功！");
} else {
alert("添加失敗！");
}
};
xhr.send(formData);
};
document.getElementById("modifyBtn").onclick = function() {
var formData = new FormData(document.getElementById("userForm"));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/modifyUser", true);
xhr.onload = function() {
if (xhr.status === 200) {
alert("修改成功！");
} else {
alert("修改失敗！");
}
};
xhr.send(formData);
};
</script>

上述代碼使用了原生的JavaScript來處理表單提交事件。當用戶點擊添加按鈕時，創建一個XMLHttpRequest對象，并使用POST方法將表單數據發送到服務器的"/addUser"接口。服務器根據接收到的參數，保存數據到數據庫，并返回相應的響應結果。客戶端根據服務器返回的響應結果，彈出相應的提示信息。同樣，當用戶點擊修改按鈕時，也會發送一個類似的請求到"/modifyUser"接口。 通過以上的示例，我們可以看出，使用Ajax可以在同一頁面上實現數據的添加和修改功能。這不僅提高了用戶的體驗，還提供了更加方便和高效的操作方式。通過使用Ajax，我們可以在無需刷新頁面的情況下，實時更新數據，給用戶帶來更好的交互體驗。在實際開發中，我們可以根據具體的需求，靈活運用Ajax技術來實現各種功能。