问题描述不是很清晰,但我可以提供一个简单的使用jQuery进行Ajax请求,并使用Bootstrap显示结果的例子。
假设你有一个简单的Spring Boot应用,它提供一个REST API来获取一些数据。
Spring Boot Controller:
@RestController
public class DataController {
@GetMapping("/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("这是一些数据");
}
}
HTML 和 jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button id="fetchData" class="btn btn-primary">获取数据</button>
<div id="dataContainer" class="mt-4">
<!-- 数据将被显示在这里 -->
</div>
</div>
<script>
$(document).ready(function() {
$('#fetchData').click(function() {
$.ajax({
url: '/data',
type: 'GET',
success: function(data) {
$('#dataContainer').text(data);
alert('数据已经更新!');
},
error: function() {
alert('数据获取失败!');
}
});
});
});
</script>
</body>
</html>
在这个例子中,我们使用了jQuery的$.ajax()
方法来发送一个GET请求到/data
端点,并在成功获取数据后,使用Bootstrap的alert
组件来显示数据。
注意: 这里没有使用Maven,因为你的问题没有提到如何集成Maven,但如果你需要在Maven项目中使用这些技术,你需要在pom.xml
中添加相应的依赖。