JQuery发起ajax请求，并在页面动态的添加元素

最新推荐文章于 2021-08-06 13:10:42 发布

DaleyZou

最新推荐文章于 2021-08-06 13:10:42 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/DaleyZou/article/details/82226927

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

页面html代码：

<li>
    <div class="coll-tit"><span class="coll-icon"><i
            class="sysfont coll-default"></i>全域旅游目的地</span>
    </div>
    <div class="coll-panel">
        <div class="title-cont-two" style="    padding-top: 5px;padding-right: 5px;">
            <p><span>共</span><span>计<span id="globalTravelCount">XX</span>个</span></p>
            <p class="this-title-two title-block mt-10" id="globalTravel">

                <a class="more" style="cursor: pointer;" id="globalTravelMore">查看更多
                <i class="sysfont"></i></a>
            </p>
            <div class="title-cont-two"></div>
        </div>
    </div>
</li>

发起ajax的js代码：

function loadMoreGlobalData() {
        var $parent_region = $("#parent_region").val();
        var $level = $("#level").val();
        var globalTravelCount = parseInt($("#globalTravelCount").text());

        var d = document.getElementById("globalTravel");
        var p1 = d.getElementsByTagName('span');
        var num = p1.length;  // 得到目前已经显示的旅游目的地的数量

        var currentPage = Math.floor(num / 10);  // 得到当前页数
        if (parseInt(num) >= globalTravelCount){     // 已经显示全部数据
            $("#globalTravelMore").remove();
        }else {
            $.post("/globalTravel/more",{ parent_region:$parent_region,pageNum:currentPage,level:$level},
                function(backData,textStatus,ajax){

                    if (textStatus == "success") {
                        //遍历
                        //返回json数组对象,对其遍历
                        $.each(backData, function (i, json) {
                            var $span = $("<span></span>");
                            var $a = $("<a></a>")
                            $a.attr('href','/data-check?parent_region='+json['region']+'&level='+json['level']);
                            $a.text(json['name'])
                            $span.append($a);
                            $("#globalTravelMore").before($span);
                        });
                        // $("#globalTravelMore").appendTo("#globalTravel")
                        var spanCount = document.getElementById("globalTravel").getElementsByTagName('span').length;
                        if (parseInt(spanCount) >= globalTravelCount) {
                            $("#globalTravelMore").remove();
                        }
                    }else {
                        alert("ajax读取信息失败了！")
                    }
                },"json");
        }
    }

给html代码中的a标签（查看更多）添加点击事件的js代码：

<script>
    $("#globalTravelMore").click(function () {
        loadMoreGlobalData()
    });
</script>

html页面示意图：

html页面示意图

部分json数据展示：

[
{
region: 510726,
parent_region: 510700,
name: "北川羌族自治县",
level: 3,
exampleStatus: 1
},
{
region: 510727,
parent_region: 510700,
name: "平武县",
level: 3,
exampleStatus: 1
},
{
region: 510800,
parent_region: 510000,
name: "广元市",
level: 2,
exampleStatus: 1
},
{
region: 510822,
parent_region: 510800,
name: "青川县",
level: 3,
exampleStatus: 1
},
{
region: 510823,
parent_region: 510800,
name: "剑阁县",
level: 3,
exampleStatus: 1
},
{
region: 511100,
parent_region: 510000,
name: "乐山市",
level: 2,
exampleStatus: 1
}
]