javaweb Ajax AXios异步框架 JSON 案例
以下是一个使用Axios进行异步请求处理的JavaWeb示例。假设我们有一个简单的Spring MVC应用程序，并希望通过AJAX异步获取一些数据。
后端代码 (Spring MVC Controller):
@Controller
public class AjaxController {
@GetMapping("/getData")
@ResponseBody
public Map<String, Object> getData() {
Map<String, Object> data = new HashMap<>();
data.put("key", "value");
return data;
}
}前端代码 (HTML + JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="dataContainer">Loading data...</div>
<script>
axios.get('/getData')
.then(function (response) {
// 处理响应数据
document.getElementById('dataContainer').textContent = response.data.key;
})
.catch(function (error) {
// 处理错误情况
console.error('Error fetching data: ', error);
});
</script>
</body>
</html>在这个例子中，我们使用了Axios库来发送异步GET请求，获取后端/getData接口的数据，然后更新页面上的元素来显示这些数据。这是一个非常基础的示例，但展示了如何将Axios集成到现代Web开发中。
评论已关闭