ajax请求之后渲染数据

function fun() {
  $.ajax({
    type: "GET",
    url: "website/js/case.json",
    // data:{"id":val},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
    data: "",
    async: true, // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
    cache: true, // 表示浏览器是否缓存被请求页面,默认是 true
    dataType: "json", // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
    success: function (res) {
      var data = res.res;
      //拼接字符串
      //对数据做遍历，拼接到页面显示
      /*for循环*/
      // for (var i = 0; i < data.length; i++) {
      //     console.log(data[i].list);
      //     var list = data[i].list;
      //     str +=
      //         '<div style="position: relative;top: -1.5rem;display: block;height: 0;overflow: hidden;"" id="' +
      //         data[i].id +
      //         '">' +
      //         '</div>' +
      //         '<div class="exampleOne">' +
      //         '<div class="listTitle">' +
      //         data[i].name +
      //         "</div>" +
      //         '<div class="caseBody">' +
      //         '<div class="caseContent">' +
      //         "<ul >";
      //     for (var j = 0; j < list.length; j++) {
      //         str += "<li>";
      //         str += "<div>";
      //         str += '<a href="' + list[j].href + '" target="_blank">';
      //         str +=
      //             '<img οnlοad="DrawImage(this,100,0)" src="' + list[j].href + '" />';
      //         str += "</a>";
      //         str += "</div>";
      //         str += '<p class="listWord">' + list[j].type;
      //         str += '</p>'
      //         str += "</li>";
      //     }
      //     str += "</ul>" + "</div>" + "</div>" + "</div>";
      // }

      /*each循环*/
      $.each(data, function (k, v) {
        str +=
          '<div style="position: relative;top: -1.5rem;display: block;height: 0;overflow: hidden;"" id="' +
          v.id +
          '">' +
          "</div>" +
          '<div class="exampleOne">' +
          '<div class="listTitle">' +
          v.name +
          "</div>" +
          '<div class="caseBody">' +
          '<div class="caseContent">' +
          "<ul >";
        $.each(v.list, function (k1, v1) {
          str += "<li>";
          str += "<div>";
          str +=
            '<div data-toggle="modal" data-target="#myModal" class="pic" data-whatever="' +
            v1.href +
            '">';
          str +=
            '<img οnlοad="DrawImage(this,100,0)" class="lazyload" data-src="' +
            v1.href +
            '" />';
          str += "</div>";
          str += "</div>";
          str += '<p class="listWord">' + v1.num;
          str += "</p>";
          str += "</li>";
        });
        str += "</ul>" + "</div>" + "</div>" + "</div>";
      });
      //放入页面的容器显示
      $("#example").html(str);
    },
    error: function (err) {
      console.log(err);
    },
  });
}
fun();