HTML页面Aiax调用api接口的JSON数据到标签

HTML代码

<div class="no-hd">
          <ul>
            <li id="count_zdr"></li>
            <li id="sum_totalData"></li>
          </ul>
        </div>

api数据格式

{"data":[{"zdr_total":18000}],"success":true}

script代码

<script>
		// 管控重点人总数
  $.ajax({
    url: "http://localhost:8520/api/getZdrTotal",
    dataType: "json",
    success: function(res) {
	  var zdr_total = res.data[0].zdr_total;
      document.getElementById("count_zdr").append(zdr_total);
    },})
	
	   // 数据资源总量
  $.ajax({
    url: "http://localhost:8520/api/getTotalData",
    dataType: "json",
    success: function(res) {
	  var sum_totalData = res.data[0].total;
      document.getElementById("sum_totalData").append(sum_totalData);
    },})
		</script>

前一天我代码写到这里结束，运行前端页面没有加载出来数据，进入后端查看api的调用记录，没有HTML调用api的所有记录。历经一番操作，终于在引用jQuery库后问题得到解决。(Ajax需要jquey的支持来调用)

jQuery代码
https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js