前端访问本地 json 文件

最新推荐文章于 2024-06-01 09:15:00 发布

小四是个处女座

最新推荐文章于 2024-06-01 09:15:00 发布

阅读量2.6k

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/xiaosi1413/article/details/123903413

版权

前端 javascript json

前端同时被 2 个专栏收录

72 篇文章 6 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

在这里插入图片描述
控制台数据

 <!DOCTYPE html>
<!-- saved from url=(0243)file:///C:/Users/%E5%B0%8F%E5%9B%9B/Documents/WeChat%20Files/wxid_sekc1lcyarn422/FileStorage/File/2022-03/%E5%A1%94%E9%87%8C%E6%9C%A8%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2%E5%AD%A6%E7%94%9F%E6%88%90%E7%BB%A9%E5%8D%95(1)(1).html -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>塔里木职业技术学院学生成绩单</h4>
    <ul class="ulDom">

    </ul>

    <table cellpadding="0" cellspacing="0" class="Ltable" border="1" style="text-align: center;">
    </table>
   
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

   <script>
       function callback(data){
         var data = data.data
        var ulData = ""
            ulData = `<li><span>姓名：</span>${data.ClassName}</li><li><span>学号：</span>${data.StuNo}</li><li><span>专业：</span>${data.MajorName}</li><li><span>班级：</span>${data.ClassName}</li>`

            $(".ulDom").html(ulData)
            var tableDom = "<table cellpadding='0' cellspacing='0'><tr><td>学年</td><td>学期</td><td>科目类型</td> <td>科目</td> <td>学分</td><td>成绩</td> <td>第一次补考成绩</td><td>第二次补考成绩</td></tr>";
            var trDom = "";
            var tdDom = "";
            // 学年
            for (var j = 0; j < data.ScoreList.length; j++) {
                var rowNum = data.ScoreList[j].StuScoreEntityList.length
                console.log("rowNum", rowNum)
                //  学期
                for (var i = 0; i < data.ScoreList[j].StuScoreEntityList.length; i++) {
                    trDom += '<tr>'
                    tdDom = ""
                    if (i == 0) {
                        tdDom += `<td rowspan='${rowNum}'> ${data.ScoreList[j].AcademicYearNo}</td><td rowspan='${rowNum}'>第${data.ScoreList[j].Semester}学期</td>`
                    }
                    tdDom += `<td> ${data.ScoreList[j].StuScoreEntityList[i].LessonSortName}</td><td> ${data.ScoreList[j].StuScoreEntityList[i].LessonName}</td><td> ${data.ScoreList[j].StuScoreEntityList[i].StudyScore}</td><td> ${data.ScoreList[j].StuScoreEntityList[i].Score}</td><td> ${data.ScoreList[j].StuScoreEntityList[i].ScoreOfNotPass}</td><td> ${data.ScoreList[j].StuScoreEntityList[i].ScoreOfNotPassTwo}</td>`
                    trDom += tdDom + "</tr>";
                }
            }
            tableDom += trDom + "</table>";
            $(".Ltable").html(tableDom);

       }
   </script>
   //本地json数据
    <script src="train.json?callback=callback"></script>

</body>

</html>

// train.json
会报错但是可以用
可自行添加数据

callback(

{
    "code": 200,
    "info": "响应成功",
    "data": {
        "StuNo": "2020020227",
        "StuName": "热依汉古丽·阿卜力米提",
        "MajorNo": "302",
        "MajorName": "机电一体化技术",
        "ClassNo": "2030102",
        "ClassName": "20机电2班",
        "ScoreList": [
            {
                "AcademicYearNo": "21-22",
                "Semester": "1",
                "StuScoreEntityList": [
                    {
                        "AcademicYearNo": "21-22",
                        "Semester": "1",
                        "LessonNo": "4603011003",
                        "LessonName": "马克思主义哲学原理(机电一体化技术)",
                        "StudyScore": null,
                        "Score": 67,
                        "ScoreOfNotPass": null,
                        "ScoreOfNotPassTwo": null,
                        "LessonSortName": "必修课"
                    },
                ]
            },
         
        ]
    }
}




)

小四是个处女座

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端访问本地 json 文件

控制台数据 <!DOCTYPE html><!-- saved from url=(0243)file:///C:/Users/%E5%B0%8F%E5%9B%9B/Documents/WeChat%20Files/wxid_sekc1lcyarn422/FileStorage/File/2022-03/%E5%A1%94%E9%87%8C%E6%9C%A8%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2%E5%AD%A6.
复制链接

扫一扫