ajax 技术动态加载数据,jQuery结合Ajax实现动态加载数据【原创】

原先的页面如下：

要实现的效果图：

要实现的效果，就是点击“查看更多”按钮，动态加载五条数据。而点击“查看所有”时数据全部加载。

主要的思路：

1、点击按钮，发生点击事件。

2、执行AJAX。若成功，返回数据进行遍历。

3、写样式，追加到原先表格的后面。

部分代码如下：

查看更多：

$(function() {

$(".lookup1").children(".show_more").click(function() {//点击查看更多按钮，发生点击事件

var page = $(this).data("page") + 1 ;//之前给按钮添加data-page属性，在这里获取

var that = $(this);

$.ajax({

type: "GET",

url: "index.php?c=analyse&a=showMore&customer_id=" + customer_id,

data: "page=" + page,

success: function(results){

var obj = $.parseJSON(results);//将返回的数据转化为json对象

var html = '';//初始化，置空

$.each(obj, function(index, item) {//遍历对象

html += '

';

html += '

' + item['content'] + '';

html += '

' + item['date_added'] + '';

html += '

' + item['user_name'] + '';

html += '

';

});//

that.parent(".lookup1").siblings(".preview_table7").find("tr:last").after(html); //追加内容

that.data("page", page + 1);//页数加1

}

});

})

})

查看所有，与查看更多同理，只是调用的方法不一样而已。这里就不列出代码了。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/5466.html

微信打赏

支付宝打赏

感谢您对作者Eva的打赏，我们会更加努力！    如果您想成为作者，请点我