JQuery独取本地JSON文件

你的名字 2023-06-22 06:20 2阅读 0赞

## 1. 确保使用WebStorm开发，否则在本地测试有跨域提示 ##

## 2. 主文件，要引入JQuery库 ##

<!DOCTYPE html>
    <html lang="ZH_CN">
    
    <head>
        <meta charset="UTF-8">
        <script src="jquery-3.4.1.js"></script>
    </head>
    
    <body>
    <div id="content">
    
    </div>
    </body>
    <script> $(document).ready( function () { var content = $("#content"); $.getJSON("data.json", "", function (data) { for (var i = 0; i < data.data.course_chapter.length; i++) { console.log(data.data.course_chapter[i].name) content.append( '<h6>' + data.data.course_chapter[i].name + '</h6>' ); for (let j = 0; j < data.data.course_chapter[i].section_leaf_list.length; j++) { console.log(data.data.course_chapter[i].section_leaf_list[j].name) content.append( '<p>' + data.data.course_chapter[i].section_leaf_list[j].name + '</p>' ); } } console.log(data.data) }); }); </script>
    
    </html>

## 3. 要解析的JSON文件 ##

{ 
      "data": { 
        "course_chapter": [
          { 
            "section_leaf_list": [
              { 
                "order": 1,
                "leaf_list": [
                  { 
                    "name": "piazza访问和使用",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317334,
                    "leaf_type": 0,
                    "id": 597197,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 1,
                    "leafinfo_id": 597196
                  },
                  { 
                    "name": "html",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317334,
                    "leaf_type": 3,
                    "id": 597198,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 2,
                    "leafinfo_id": 597197
                  }
                ],
                "chapter_id": 67260,
                "id": 317334,
                "name": "0.1 Piazza讨论区"
              },
              { 
                "order": 2,
                "leaf_list": [
                  { 
                    "name": "实验平台使用帮助",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317335,
                    "leaf_type": 0,
                    "id": 597200,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 1,
                    "leafinfo_id": 597199
                  },
                  { 
                    "name": "平台使用帮助",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317335,
                    "leaf_type": 3,
                    "id": 597201,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 2,
                    "leafinfo_id": 597200
                  },
                  { 
                    "name": "Gitlab使用帮助",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317335,
                    "leaf_type": 3,
                    "id": 597202,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 3,
                    "leafinfo_id": 597201
                  },
                  { 
                    "name": "IBM内部账号初始化",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317335,
                    "leaf_type": 3,
                    "id": 597203,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 4,
                    "leafinfo_id": 597202
                  }
                ],
                "chapter_id": 67260,
                "id": 317335,
                "name": "0.2 在线实验平台"
              },
              { 
                "order": 3,
                "leaf_list": [
                  { 
                    "name": "Raw HTML",
                    "is_locked": false,
                    "start_time": 1574035200000.0,
                    "chapter_id": 67260,
                    "section_id": 317336,
                    "leaf_type": 3,
                    "id": 597205,
                    "is_show": true,
                    "end_time": 0,
                    "score_deadline": 1578844799000.0,
                    "is_score": true,
                    "is_assessed": false,
                    "order": 1,
                    "leafinfo_id": 597203
                  }
                ],
                "chapter_id": 67260,
                "id": 317336,
                "name": "0.2在线实验平台"
              }
            ],
            "order": 1,
            "id": 67260,
            "name": "第零讲 在线教学环境准备"
          }
        ]
      },
      "success": true
    }

## 4. 实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9sb2NhbGhvc3QuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9sb2NhbGhvc3QuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019121416352568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9sb2NhbGhvc3QuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70