[Java Web]AJAX & Axios | 一种结合HTML来取代传统JSP的技术
以下是一个使用AJAX和Axios的示例，它展示了如何通过AJAX调用后端API，并在前端页面上动态更新数据，而不是使用传统的JSP页面刷新技术。
<!DOCTYPE html>
<html>
<head>
<title>AJAX & Axios 示例</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function fetchData() {
axios.get('/api/data')
.then(response => {
document.getElementById('data-container').innerHTML = response.data;
})
.catch(error => {
console.error('Error fetching data: ', error);
});
}
window.onload = function() {
fetchData(); // 页面加载完成后获取数据
};
</script>
</head>
<body>
<div id="data-container">
<!-- 数据将被加载到这里 -->
</div>
<button onclick="fetchData()">刷新数据</button>
</body>
</html>在这个例子中，当页面加载完成后，fetchData函数会被调用，它通过Axios发送一个GET请求到/api/data端点，获取数据并将其插入到data-container元素中。用户可以点击按钮手动触发数据的刷新。这种方式提供了更好的用户体验，因为它避免了页面的刷新，使得交互更加流畅。
评论已关闭