600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > JQuery发起ajax请求 并在页面动态的添加元素

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

时间:2020-07-12 15:33:07

相关推荐

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

页面html代码:

<li><div class="coll-tit"><span class="coll-icon"><iclass="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页面示意图:
部分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}]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。