首页Jquery select2 请求 Springboot获取数据的完整代码

Jquery select2 请求 Springboot获取数据的完整代码

时间: 2024-03-16 11:45:49 浏览: 76

以下是一个简单的示例代码，演示了如何使用 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。

阅读全文