我正在尝试从数据库中获取数据并在浏览器中显示它,所以
这是我的 index.html
:
<button id="getAllGroups" type="button" class="btn btn-primary">Groups</button>
<div class="row">
<div class="col-md-8">
<table>
<thead>
<th>Group Id</th>
<th>Group name</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
我在上面连接了这些脚本:
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="/getGroups.js"></script>
这里是restcontroller中的get方法:
@GetMapping("/checkGroups")
public ResponseEntity<Object> getAllGroups() {
ServiceResponse<List<Group>> response = new ServiceResponse<>("success", groupService.getAll());
return new ResponseEntity<Object>(response, HttpStatus.OK);
}
这是我的 js
:
GET: $(document).ready(
function () {
// GET REQUEST
$("#getAllGroups").click(function (event) {
event.preventDefault();
ajaxGet();
});
// DO GET
function ajaxGet() {
$.ajax({
type: "GET",
url: "checkGroups",
success: function (result) {
if (result.status == "success") {
var custList = "";
$.each(result.data,
function (i, group) {
var Html = "<tr>"
"<td>" + group.groupId + "</td>"
"<td>" + group.groupName + "</td>"
"</tr>";
$('#tbody').append(Html);
});
console.log("Success: ", result);
} else {
console.log("Fail: ", result);
}
},
}
})
实体 Group
:
@Entity
@ToString
@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "groups", schema = "public")
public class Group {
@Id
@Column(name="group_id")
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int groupId;
@NotNull
@Size(min = 4,message = "Group name should consist of 4 symbols!")
@Size(max = 4)
@Column(name="group_name")
private String groupName;
}
当我点击 Groups
按钮打开 index.html
哪里 id="getAllGroups"
,什么也没发生,但当我尝试只打印数据库中的数据,而不是以表格式打印时,一切都正常,所以,我想这是个麻烦 Ajax
..
暂无答案!
目前还没有任何答案,快来回答吧!