【总结整理】json数据请求简化版理解（祺哥的成果）-CSDN博客

在同源js目录下新建.txt文件

{
  "news":[
    {"title":"审计管理","time":"2018-03-10 21:00"},
    {"title":"菜单管理","time":"2018-03-10 21:00"},
    {"title":"订单管理","time":"2018-03-10 21:00"},
    {"title":"合同管理","time":"2018-03-10 21:00"},
    {"title":"物流管理","time":"2018-03-10 21:00"},
    {"title":"行政管理","time":"2018-03-10 21:00"},
    {"title":"人事管理","time":"2018-03-10 21:00"},
    {"title":"购物管理","time":"2018-03-10 21:00"},
    {"title":"批发管理","time":"2018-03-10 21:00"},
    {"title":"安全管理","time":"2018-03-10 21:00"},
    {"title":"账号管理","time":"2018-03-10 21:00"},
    {"title":"财务管理","time":"2018-03-10 21:00"},
    {"title":"其他管理","time":"2018-03-10 21:00"}
  ]
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>news</title>
        <link rel="stylesheet" href="css/index.css" />
        <script src="js/jquery.js"></script>
        <script>
            $(document).ready(function(){
                  var result = $.ajax({
                      url:"./newsData.txt",
                      async:false,
                      dataType: "json"
                  });
                  result = $.parseJSON(result.responseText);//转换为JSON格式
                  var news = result.news;
                  var htmlObj = '';
                  for(var i=0;i<news.length;i++){    //循环生成列表
                      htmlObj += '<li class="newsItem">'+news[i].title+'<span>'+news[i].time+'</span></li>';
                  }
                  $('.newsList').html(htmlObj);    //替换html里的内容
            });
        </script>
    </head>
    <body>
        <h2>News</h2>
        <ul class="newsList">
            
        </ul>
    </body>
</html>