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

何呵呵是大佬

已于 2022-04-30 16:37:43 修改

阅读量2.6k

点赞数 2

分类专栏： java学习文章标签：前端 json 后端

于 2022-04-30 16:26:32 首次发布

本文链接：https://blog.csdn.net/HDawnn/article/details/124514153

版权

java学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了在一个前后端分离的项目中，如何通过前端的jQuery和ajax技术与后端的数据接口进行数据传输。后端创建接口返回JSON数据，前端利用这些数据动态生成表格并展示。当用户请求时，根据不同的标志位，前端会显示不同的操作按钮，如开始考试、修改和删除。在数据请求过程中，遇到错误时，系统会提示用户服务器出现问题。

摘要由CSDN通过智能技术生成

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

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

function myExam(begin, num, flag) {
    $.ajax({
        type: "get",
        url: "http://localhost:8090/ExamManagementSystem_war_exploded/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;
    }