大佬教程收集整理的这篇文章主要介绍了javascript – 通过返回使用Ajax / jQuery加载更多内容，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的网页由三个不同的列组成.所以,当点击“更多”按钮时,我想做的是在3列添加3个新的不同内容.
我想使用ajax和php在主列div内返回一个新的div内容.下面这样的东西
<div class='content_3'>
<div class='widget'>
Content Here
</div>
</div>
下面是我的页面的一个例子…小提琴这里http://jsfiddle.net/Lqetw5ck/2/
<div id='main_column_1'>
<div id='content_1'>
Load data from php/mysql database (For 1st Main Div)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<br>
<div id='main_column_2'>
<div id='content_1'>
Load data from php/mysql database (For 2nd Main Dev)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<br>
<div id='main_column_3'>
<div id='content_1'>
Load data from php/mysql database (For 3rd Main Dev)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<button>Show More</button>
我应该如何编写我的PHP代码？因为我要返回一个完整的div内容.我的想法是这样的.
<? $sql_stmt = "SELECT * FROM customers"; $sql = mysqli_query($con,$sql_stmt) or die(mysqli_error($con)); $row = mysqli_fetch_assoc($sql); $content = '<div class="content_3"><div class="widget"> '.$row['firstname'].' </div></div>'; ?>
我想将$content字符串返回到主列1,2和3,以便在该列下显示一个新的div.
谢谢！
编辑：我发现这个How to implement jScroll?,但不知道作者如何写他的PHP代码.也许这几乎和我的情况一样吗？
1.使服务器端的data.php提供数据：
<?php // data.php
$page_index = intval($_GET['page_index']);
$page_size = intval($_GET['page_size']);
$skip = ($page_index-1) * $page_size;
$data = my_query("
select * from my_table
limit $skip,$page_size;
"); // the my_query function executes the sql query and return the dataset.
echo json_encode($data);
?>
之后,您可以通过url请求获取分页数据：
/data.php?page_index=1\u0026amp;page_size=10为第一页数据,和
/data.php?page_index=2\u0026amp;page_size=10为第二页数据;
等等.
2.使用jQuery进行抓取功能
var current_page = 1;
var fetch_lock = false;
var fetch_page = function() {
if(fetch_lock) return;
fetch_lock = true;
$.getJSON('/data.php',{page_index: current_page; page_size: 10},function(data) {
// render your data here.
current_page += 1;
if(data.length == 0) {
// hide the `more` tag,show that there are no more data.
// do not disable the lock in this case.
}
else {
fetch_lock = false;
}
});
}
3.绑定事件触发fetch_page.
当以下情况符合时,我们需要fetch_page触发器：
>页面加载(第一个数据页面).
>页面滚动到底部.
>点击更多的按钮.
你可以决定第二个或第三个效果是否更好,我会告诉你实现：
$(function() {
// the definition above.
// ...
// 1. on page loaded.
fetch_page();
// 2. on scroll to bottom
$(window).scroll(function() {
if($('body').scrollTop() + $(window).height() == $('body').height()) {
fetch_page();
}
});
// 3. on the `more` tag clicked.
$('.more').click(fetch_page);
});
所以你可以尝试以这种方式编写效果,这不是太难,有尝试,祝你好运！
以上是大佬教程为你收集整理的javascript – 通过返回使用Ajax / jQuery加载更多内容全部内容，希望文章能够帮你解决javascript – 通过返回使用Ajax / jQuery加载更多内容所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。