Jquery select2 请求 Springboot获取数据的完整代码
时间: 2024-03-16 21:45:49 浏览: 78
jQuery获取高德API城市划分数据代码.zip
以下是一个简单的示例代码,演示了如何使用 jQuery Select2 进行 AJAX 请求获取 Spring Boot 后端的数据:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Select2 Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#mySelect').select2({
ajax: {
url: '/api/getData',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 3
});
});
</script>
</head>
<body>
<select id="mySelect" style="width: 300px;"></select>
</body>
</html>
```
后端代码:
```java
@RestController
@RequestMapping("/api")
public class MyController {
@GetMapping("/getData")
public List<MyData> getData(@RequestParam("q") String query) {
// 根据查询条件从数据库中获取数据
List<MyData> dataList = myService.getData(query);
return dataList;
}
}
```
在上面的代码中,我们在前端使用了 Select2 插件,并配置了 AJAX 请求,指向后端的 `/api/getData` 接口。在后端,我们定义了一个 `MyController` 类,其中的 `getData` 方法会根据传入的 `q` 参数从数据库中获取数据并返回。
需要注意的是,我们在前端配置了 `minimumInputLength` 参数,它表示用户至少需要输入多少个字符才会触发 AJAX 请求。在这个例子中,我们设定为 3。
阅读全文