jquery-ajax实现动态数据填入ul（新闻展示页面）

界面丑，未调整，数据随便写的稍后调整。先记录一下。

1.头部加载文件：（低版本也可）

<script src="js/jquery-3.3.1.js" type="text/javascript">script>

2.json文件：value.json

本例子专门使用两层嵌套json，为了学习多层json的解析。

{
   "name": "中国",
   "provinces":
   [
      {"id":"6528","name": "巴音郭楞", "value":  14149},
      {"id":"6532","name": "和田", "value":    2226.41},
      {"id":"6522","name": "哈密", "value":    1544.94},
      {"id":"6529","name": "阿克苏", "value":   3720.24},
      {"id":"6543","name": "阿勒泰", "value":   2771.96},
      {"id":"6531","name": "喀什", "value":    6263.69},
      {"id":"6542","name": "塔城", "value":    4494.77},
      {"id":"6523","name": "昌吉", "value":    3835.48},
      {"id":"6530","name": "克孜勒苏", "value":  5493.23},
      {"id":"6521","name": "吐鲁番", "value":   12299.72},
      {"id":"6540","name": "伊犁", "value":    14151.74},
      {"id":"6527","name": "博尔塔拉", "value":  1562.67},
      {"id":"6502","name": "克拉玛依", "value":  14225.67},
      {"id":"6501","name": "乌鲁木齐", "value":  384.73}
   ]
}

3.html代码

<div id="u82_div" class="">
    <ul id="list">
   
    ul>
div>

4.js代码

<script type="text/javascript">
    //滚动插件
    $.ajax({
        url: 'json/value.json',
        type: 'POST',
        dataType: 'json',
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $("#list").html('');
            var json = eval(result);
                $.each(json.provinces, function (index, value) {//index是循环的序数
                    var name = json.provinces[index].name;
                    $("#list").html($("#list").html() + "" + this.name + ""+"
");
                });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
        }
    });
script>

5.界面升级（有空整理）

（1）可加滚动展示新闻

（2）可加点击展示链接详情