頁面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 } ]

轉載于:https://www.cnblogs.com/daleyzou/p/9562367.html

總結

以上是生活随笔為你收集整理的JQuery发起ajax请求，并在页面动态的添加元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。