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

页面html代码：

class="sysfont coll-default">�全域旅游目的地

共计XX个

查看更多�

发起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 = $("");

var $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代码：

$("#globalTravelMore").click(function () {

loadMoreGlobalData()

});

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

}

]