html中通过JS获取JSON数据并加载的方法

<div class="container-fluid content ">
    <div class="container neirong">
      <div class="left fl">
        <div class="title">
          热门视频
        </div>
        <div class="medialist">
        </div>
      </div></div>
</div>

<script>
    $(document).ready(function(){
      
      console.log(1111)
      
          $.getJSON('data.json',function(data){
            
            console.log(222)
            
            
            
          var mediahtml="";
          
          $.each(data,function(i,data) {
            
        
        
          mediahtml+='<div class="media">'+
          '<div class="media-left">'+
          '<a data-toggle="modal" data-target="#myModal">'+
          '<img class="media-object" src="/UploadFiles/2021-04-02/'+data[">

注释部分可不看，不影响内容。
首先要新建json文件，json文件需注意的问题是：json对数据格式有要求，不识别url中的各类符号，因此会提示错误，如果不修复，则会阻断JS进程，造成数据在页面不显示，这个问题我找了好久才发现，而且json问题在js中不会报错。解决办法是利用encode方法，格式化url，然后再添加进json即可，在html中应该还要用decode转回来。
第二个坑是插入html到某个标签中,有四个方法，用after就可以实现，不要用反了。
第三点是需要注意，不要在拼接字符串的时候忘掉加号，少一个就会出问题，一个小问题会找好久才发现，而且拼接错误JS不会报错，很难发现。
以上就是获取JSON数据并加载的方法。