使用Ajax技術(shù)保存表單數(shù)據(jù)，可以實(shí)現(xiàn)在頁面上實(shí)時(shí)顯示保存成功的效果。當(dāng)用戶填寫完表單并點(diǎn)擊保存按鈕時(shí)，通過Ajax向服務(wù)器發(fā)送請求，并在成功保存后，動(dòng)態(tài)更新頁面上的保存成功提示信息。
例如，假設(shè)我們有一個(gè)用戶注冊表單，包含姓名、年齡和郵箱地址等字段。用戶填寫完表單后，點(diǎn)擊保存按鈕，頁面使用Ajax將表單數(shù)據(jù)發(fā)送給服務(wù)器進(jìn)行保存。保存成功后，頁面會(huì)顯示保存成功的提示信息，并刷新頁面的內(nèi)容。
首先，我們需要在頁面上創(chuàng)建一個(gè)表單，包含姓名、年齡和郵箱地址等字段，并添加一個(gè)保存按鈕：
```html
用戶注冊表單：
``` 接下來，我們使用JavaScript編寫Ajax請求的代碼。當(dāng)用戶點(diǎn)擊保存按鈕時(shí)，調(diào)用saveForm()函數(shù)，該函數(shù)會(huì)獲取表單數(shù)據(jù)并使用Ajax發(fā)送POST請求到服務(wù)器。 ```javascript function saveForm() { var form = document.getElementById("userForm"); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open("POST", "saveForm.php", true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { document.getElementById("message").textContent = xhr.responseText; form.reset(); } else { document.getElementById("message").textContent = "保存失敗！"; } } }; xhr.send(formData); } ``` 在上述代碼中，發(fā)送POST請求的URL為"saveForm.php"，可以根據(jù)實(shí)際需求進(jìn)行修改。使用FormData對象可以方便地獲取表單數(shù)據(jù)，并將其作為請求參數(shù)發(fā)送給服務(wù)器。 服務(wù)器端的代碼可以根據(jù)具體的語言和框架進(jìn)行編寫。例如，PHP中可以通過以下方式獲取表單數(shù)據(jù)并保存： ```php``` 當(dāng)服務(wù)器成功保存表單數(shù)據(jù)后，會(huì)返回一個(gè)"保存成功！"的響應(yīng)。通過Ajax的回調(diào)函數(shù)，我們將這個(gè)響應(yīng)內(nèi)容顯示在頁面上的pre標(biāo)簽中，并且重置表單以便用戶繼續(xù)填寫其他信息。 這樣，每當(dāng)用戶填寫完表單并點(diǎn)擊保存按鈕時(shí)，頁面會(huì)通過Ajax將表單數(shù)據(jù)發(fā)送到服務(wù)器保存，并在保存成功后，實(shí)時(shí)顯示保存成功的提示信息。用戶可以立即看到保存成功的提示，而不必等待頁面刷新。 總之，使用Ajax保存表單數(shù)據(jù)并在頁面上顯示保存成功的效果，可以提升用戶體驗(yàn)，讓用戶得到實(shí)時(shí)的反饋。無論是用戶注冊表單、留言板、評論功能等，均可以應(yīng)用這種技術(shù)，使用戶操作更加順暢和直觀。