如何使用ajax获取表

wyyhbhjk  于 2021-07-06  发布在  Java
关注(0)|答案(0)|浏览(241)

我正在尝试从数据库中获取数据并在浏览器中显示它,所以
这是我的 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 ..

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题