Блог

На моей index странице у меня есть кнопка для перенаправления на страницу учителей.

index.html :

Здесь у меня есть кнопка <button id="getAllTeachers" type="button" class="btn btn-primary">Teachers</button> , а также у меня есть один скрипт здесь :

  <script>
    document.querySelector('#getAllTeachers')
        .addEventListener('click',() => {
            window.location.href = "/teacherController/check" 
        });
</script>
 

Когда я нажимаю на кнопку выше, конечно, она перенаправляет на мой TeacherController класс, а ниже я прикрепил код из контроллера и мою попытку передачи параметров на HTML-страницу:

 RestController
@RequestMapping("/teacherController")
public class TeacherController {
private static final String TEACHER_MODEL = "teacher";
@Autowired
TeacherService teacherService;


@RequestMapping("check")
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject(teacherService.getAll());
    modelAndView.setViewName("/teacherViews/teachersPage");
    return modelAndView;
}
 

teacherViews/teachersPage :

 <script src="/getTeachers.js"></script>
<div class="container">
<table class="teacherTable" border="1" width="100%" cellpadding="5">
    <thead>
    <th>TEACHER ID</th>
    <th>TEACHER NAME</th>
    <th>TEACHER POSITION</th>
    <tbody id="teacherBody">

    </tbody>
</table>
 

И getTeachers.js :

 GET: $(document).ready(
function () {

    // GET REQUEST
    $("#getAllTeachers").click(function (event) {
        event.preventDefault();
        ajaxGet();
    });

    // DO GET
    function ajaxGet() {
        $.ajax({
            type: "GET",
            url: "teacherController/check",
            success: function (result) {
                if (result.status == "success") {
                    var custList = "";
                    $.each(result.data,
                        function (i, teacher) {

                            var Html = "<tr>"  
                                "<td>"   teacher.teacherId   "</td>"  
                                "<td>"   teacher.teacherName   "</td>"  
                                "<td>"   teacher.position   "</td>"  
                                "</tr>";
                            console.log("Teacher checking: ", teacher);
                             $('#teacherBody').append(Html);

                        });
                    console.log("Success: ", result);
                } else {
                    console.log("Fail: ", result);
                }
            },
            error: function (e) {
                console.log("ERROR: ", e);
            }
        });
    }
})
 

Моя проблема в том, что мне нужно распечатать всех учителей, которые у меня есть в моей базе данных, но она печатает только имена столбцов таблицы без данных..

Хорошей идеей будет указать идентификатор объекта, который возвращает ваш Controller метод проверки. (Я не мог понять, что вы пытаетесь сделать с Ajax.)

 modelAndView.addObject("teachers", teacherService.getAll());
 

Таблица, в которой вы показываете учителей, должна быть такой.

 <table>
    <thead>
        <tr>
            <th>Teacher ID</th>
            <th>Teacher Name</th>
            <th>Teacher Position</th>
        </tr>
    </thead>
    <tbody id="teacherBody">
        <tr th:each="teacher : ${teachers}">
            <td th:text="${teacher.id}" />
            <td th:text="${teacher.name}" />
            <td th:text="${teacher.position}" />
        </tr>
    </tbody>
</table>