【javascript】处理嵌套显示内容

MoFe1

已于 2024-03-07 14:38:00 修改

阅读量231

点赞数

文章标签： javascript 前端 ajax

于 2023-04-17 09:15:44 首次发布

本文链接：https://blog.csdn.net/MoFe1/article/details/130192485

版权

该代码段展示了如何使用jQuery的ajax方法进行异步GET请求，以jsonp方式处理跨域数据。数据加载后，根据特定规则（每10个元素一组）构建HTML结构，用于Swiper轮播插件，实现动态内容展示。

摘要由CSDN通过智能技术生成

//模拟异步加载场景
var apiUrl = "127.0.0.1:8001"
$.ajax({
    contentType: "application/json;charset=UTF-8",
    type: 'GET',
    dataType: "jsonp",
    async: false,
    url: apiUrl + "接口访问地址",
    success: function (res) {
    console.log('GetMYZJData', res)
        if (res.code != 200) {
            return
        }
        var dataList = res.data;//获取接口数据
        var dataHtml = "";
        if (dataList != null && dataList.length > 0) {
            dataList.forEach(function (item, index, arr) {
                if ((index + 1) % 11 == 0 && (index != 0)) {//当index +1 和11取余为0且index不为0（不为首个索引时）加载大循环首部内容，处理从第11，21，31...开始的数据
                    //模拟外部嵌套为swiper轮播插件，一屏循环10个
                    dataHtml += '<div class="swiper-slide"><div class="htj-box" >';
                }
                else {
                    if (index == 0) {//当为首个索引时
                        mygzsHtml += '<div class="swiper-slide"><div class="htj-box" >';
                    }
                }
                //加载小循环单个内容(示例中为<div class="htj-box" >中DOM内容)
                if ((index + 1) == dataList .length || (index + 1) % 10 == 0) {
                    //当index+1等于  dataList的数据长度 或者 index+1和10取余为0时，加载大循环尾部内容，处理10，20，30..数据的结尾         
                    mygzsHtml += '</div></div>';
                }
            });
        }
        $("#mygzs").empty();
        $("#mygzs").append(mygzsHtml);
    }
});