ajiax请求后台接口数据并拼接展示html

ajax请求：

  $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: url + "appapi/index/indexlist",
                data: {},
                dataType: "json",
                success: function(data) {
                  
                },
            });
        });
   

原html代码：

 <div class="bnner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner.png"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner.png"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner.png"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner.png"></a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
            loop: true,
            autoplay: true,
        });
    </script>

ajax请求拼接后的代码：

 <script type="text/javascript">
        const url = '/reception/';
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: url + "appapi/index/index",
                data: {},
                dataType: "json",
                success: function(data) {
                    var banner = data.data.banner;
                    var zuixinruzhu = data.data.zuixinruzhu;
                    var rexiao = data.data.rexiao;
                    var htmlText = '';
                    //banner开始
                    htmlText += '<div class="swiper-container">';
                    htmlText += '<div class="swiper-wrapper">';
                    $.each(banner, function(i, item) {
                        htmlText += '<div class="swiper-slide">' + ' <a href="' + item.bhref + '">';
                        htmlText += '<img src="' + item.images + '">';
                        htmlText += '</a>' + '</div>';

                    });
                    htmlText += '</div>';
                    htmlText += '<div class="swiper-pagination"></div>';
                    htmlText += '</div>';
                    $(".bnner").after(htmlText);
                    //swiper配置
                    var swiper = new Swiper('.swiper-container', {
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        loop: true,
                        autoplay: true,
                    });
                    //banner结束
                },
            });
        });
    </script>

 

参考html拼接：https://www.cnblogs.com/xiaobijia/p/5890298.html