在現代的Web開發中，前端與后端的數據交互是至關重要的。為了實現無刷新更新數據的功能和提高用戶體驗，Ajax（Asynchronous JavaScript and XML）技術被廣泛應用于Web開發中。通過Ajax，前端可以通過異步的方式向后端的Controller發起請求，從而獲取數據或提交數據。這種前端與后端的交互方式不僅提高了系統的性能和用戶的體驗，同時也大大簡化了Web開發的流程。

假設我們正在開發一個簡單的留言板應用程序。當用戶點擊“發布留言”按鈕時，我們希望能夠將用戶輸入的留言內容通過Ajax請求發送到后端的Controller，然后將該留言內容在頁面實時展示出來。

$('#publishBtn').click(function() {
var message = $('#messageInput').val();
$.ajax({
url: '/message',
method: 'POST',
data: {message: message},
success: function(response) {
$('#messageList').append('<li>' + response.message + '</li>');
}
});
});

在上述代碼中，我們使用了jQuery的ajax方法來發送POST請求到后端的/message路由，并傳遞了用戶輸入的留言內容作為請求的參數。在請求成功后，我們通過回調函數來更新頁面中的留言列表。具體地，我們向id為messageList的列表中添加了一個新的li元素，將后端返回的留言內容顯示出來。

通過這種方式，我們可以實現后端Controller與前端的無縫交互。后端在接收到來自前端的請求后，可以根據請求的參數來進行相應的邏輯操作，并返回數據給前端。前端則可以根據后端的返回值來更新頁面，實現數據的實時刷新。

除了向后端發送數據請求外，Ajax還可以用于向后端提交數據。例如，在我們的留言板應用程序中，用戶可以選擇刪除自己不喜歡的留言。當用戶點擊“刪除”按鈕時，我們可以通過Ajax請求將要刪除的留言的id發送到后端的Controller，然后由后端進行相應的刪除操作。

$('.deleteBtn').click(function() {
var messageId = $(this).data('message-id');
$.ajax({
url: '/message/delete',
method: 'POST',
data: {id: messageId},
success: function(response) {
if(response.success) {
$(this).parent().remove();
} else {
alert('Failed to delete message');
}
}
});
});

在上述代碼中，我們為每個留言的刪除按鈕添加了一個點擊事件，獲取到要刪除的留言的id，并將其通過Ajax請求發送到后端的/message/delete路由中。在請求成功后，我們通過判斷后端返回的success字段來判斷是否成功刪除了留言。如果成功刪除，則將對應的留言從頁面中移除；否則，彈出一個錯誤提示框。

綜上所述，Ajax通過向后端的Controller發起請求，實現了前端與后端的數據交互。利用Ajax技術，我們可以在不刷新整個頁面的情況下，實現數據的實時更新和提交。在Web開發中，Ajax已成為一種不可或缺的技術，為開發者帶來了更高效、更靈活的開發方式。