前后端分离的项目实现数据传输

请写一份参与项目的某个功能点的开发心得

1. 功能描述
   前后端分离的项目实现数据传输
2. 软件设计方案
   前端使用jQuery和ajax进行数据请求，后端生成数据接口供前端请求。
3. 软件代码思路
   后端创建一个数据接口返回json数据。
   前端利用jQuery和ajax请求json数据，请求到数据之后封装成表格添加到table中。
4. 附上软件源代码

function myExam(begin, num, flag) {
    $.ajax({
        type: "get",
        url: "loadExam",
        async: true,
        dataType: "json",
        data: {
            "id": JSON.parse(sessionStorage.getItem("user")).id,
            "begin": begin,
            "num": num
        },
        success: function (data) {
            if (data.result === true) {
                if (begin === 0) {
                    sessionStorage.setItem("countExam", data.countExam);
                }
                var tbodyObj = "";
                $.each(data.exams, function (index, exam) {
                    tbodyObj = tbodyObj + "<tr id='eptr" + exam.eid + "'><th scope=\"row\">" + (index + 1) + "</th>" +
                        "<td>" + exam.exampapername + "</td>" +
                        "<td>" + exam.questionnumber + "</td>" +
                        "<td>" + exam.creattime + "</td>" +
                        "<td>" + exam.creatperson + "</td>";
                    if (flag === 1) {
                        tbodyObj = tbodyObj + "<td>" +
                            "<button href='doExam.html?id='" + exam.eid + " type=\"button\" class=\"btn btn-default btn-xs\">开始考试</button>" +
                            "</td>";
                    } else if (flag === 2) {
                        tbodyObj = tbodyObj + "<td>" +
                            "<a href='updpaper.html?id=" + exam.eid + "' type=\"button\" class=\"btn btn-default btn-xs\">修改</a>" +
                            "<button οnclick='isdeletePaperOrExam(" + exam.eid + ")' type=\"button\" class=\"btn btn-default btn-xs\">删除</button>" +
                            "<a href='paperDetail.html?id=" + exam.eid + "' type=\"button\" class=\"btn btn-default btn-xs\">查看题目</a>" +
                            "</td>";
                    }
                    tbodyObj = tbodyObj + "</tr>";
                })
                $("#myExam").html(tbodyObj);
            } else {
                $("#myExam").html("<tr><th scope='row'>1</th><td>你还没有考试哦~</td></tr>");
            }
        },
        error: function (data) {
            toastr["info"]("服务器挂啦，请稍等再试！", "出错啦~");
        }
    })
}

	@RequestMapping("loadPaper")
    @ResponseBody
    public Map<String, Object> paper(User user, long begin, int num) {
        Map<String, Object> resultMap = new HashMap<>();
        if (user.getId() == null) {
            resultMap.put("result", false);
            return resultMap;
        }
        List<Mypaperview> papers = exampaperService.getPaperByUidLimit(user, begin, num);
        if (papers != null && papers.size() > 0) {
            resultMap.put("result", true);
            resultMap.put("papers", papers);
            if (begin == 0) {
                long l = exampaperService.countPaperByUid(user);
                resultMap.put("countPaper", l);
            }
        } else {
            resultMap.put("result", false);
        }
        return resultMap;
    }

6. 完成效果总结