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要相吻合