Jquery实现后台返回的json数据填充到jsp表格

今日在完成javaweb的实验时，后台返回的json数据填充到jsp表格困扰了很久，使用javaex前端框架,现记录方法，供忘了返回学习

Controller

@Controller
@RequestMapping("/course")
public class CourseController {

    @Autowired
    private CourseService courseService;

    @RequestMapping("/list")
    public @ResponseBody List<Course> list(){
        List<Course> courseList = new ArrayList<Course>();
        //调用service完成查询
        courseList= courseService.list();
        return courseList;
    }
}

seivrce中的list方法返回查询到的所有数据

返回的json数据

前台界面

前台代码

这里我首先混淆了js对象与jQuery对象，记忆起的是使用js对象遍历的较为复杂的方法，折腾了半天以失败告终

笔记部分内容

解决方法

	success:function (res) {
	     var list = res;
	     var tbody = $('<tbody></tbody>')
	     $(list).each(function (index,element) {
	         if(element.remark == null){
	             element.remark = " ";
	         }
	         var tr = $('<tr></tr>');
	         tr.append(
	             '<td class="checkbox"><label class="fill-label"><input type="checkbox" class="fill listen-1"><span class="fill-css icon-check" style="color: #fff;"></span><span></span></label></td>'+
	             '<td>' + element.id + '</td>'+
	             '<td>' + element.name + '</td>'+
	             '<td>' + element.cType+ '</td>'+
	             '<td>' + element.credit + '</td>'+
	             '<td>' + element.grade + '</td>'+
	             '<td>' + element.major + '</td>'+
	             '<td>' + element.remark + '</td>')
	         tbody.append(tr)
	     })
	     $(".tbody").replaceWith(tbody);
	 }

归根到底还是基础知识不牢固导致

喜欢看到的一句话，望共勉

基础不牢，地动天摇