Spring+MyBatis开发 Day10

ajax局部刷新

使用ajax实现网页的具部刷新，以此来保留搜索条件等不需要刷新的内容

 <script>
                    setTimeout(function () {
                        $('#current_page').change(function () {
                            let page = parseInt($('#current_page').find('option:selected').val())
                            let pageNum = parseInt($('#pageNum').val())
                            var courseName = document.getElementById("courseNameText").value;
                            //alert(courseName);
                            //alert(page);
                            //alert(pageNum);
                            $.ajax({
                                type: "get",
                                url: "/course/toCourseDataList",
                                data: {currentPage:page,courseName:courseName},
                                success: function (res) {
                                    $("#table-container").html($(res).find('div[id="table-container"]').html());
                                },
                                error: function(){
                                    alert("错误");
                                }
                            })
                        })
                    }, 1000)
                </script>

语句function (res) { $("#table-container").html($(res).find('div[id="table-container"]').html());实现了局部刷新
因此后端仍然用展示列表的代码就可以：

@GetMapping("/toCourseDataList")
    public String toCourseDataList(@RequestParam(defaultValue = "1") int currentPage,String courseName, Model model){
        PageHelper.startPage(currentPage,5);
        List<Course> coureseList =  courseService.findAllCourse(courseName);
        PageInfo<Course> coursePageInfo = new PageInfo<Course>(coureseList,5);
        model.addAttribute("courseList",coureseList);
        model.addAttribute("pageInfo",coursePageInfo);
        model.addAttribute("courseName",courseName);
        return "course/courseDataList";
    }

注意ajax的get和post和后端的getMapping和postMapping要相吻合