以下为本篇文章全部内容:
Ajax分页并不稀奇,但是我不知道为什么还是有很多人把Ajax分页看得太麻烦了,也许是思路被绕进去了。其实Ajax分页是很简单的东西,Sunny就几分钟教会你Ajax分页,先来说下原理。Ajax我就不需要做过多的解释了,直接讲实现的原理,我这次说的并不是滚动到底部就可以分页,我这次做的是点击的时候才分页。
步骤:
一:获取分页按钮点击事件
二:携带参数请求(最重要的页码)
三:接收返回值,判断返回值是否正确
四:获取需要追加的容器
五:使用append方法尽情追加
我已经写好了php分页的代码和html的代码,如果使用的是框架,用法也是一样的,只要你会php的其他的都会了,原理都是一样。
请求得到的返回值我们有两种处理方式,第一是从服务端组织好html字符串返回,二是通过js调用得到json字符串进行遍历组装html代码追加。我接下来就会为大家讲解如何在得到json字符串之后拼接html的字符串。下面上视频,看不懂文章的再看视频吧,视频和文章代码一起是我的风格,方便大家看了文章不懂还可以看视频进行问题解决,一举多得。
高清视频下载地址:链接: http://pan.baidu.com/s/1sj1f4ip 密码: 1hsc
360云盘:http://yunpan.cn/cmUtKS9fnCtDF 密码:56c1
php代码:
<?php $db = new mysqli('localhost','root','root','sunny'); $db->set_charset('utf8'); if($db->connect_error){ die('连接失败('.$db->connect_errno.')'.$db->connect_error); } $p = 10*(isset($_GET['p'])&&$_GET['p']>0?$_GET['p']:0); $result = $db->query('select id,title from sl_article limit '.$p.',10'); $list = array(); while ($rows = mysqli_fetch_assoc($result)) { $list[] = $rows; } echo json_encode($list); $db->close();
html的js代码:
<!DOCTYPE html> <html> <head> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <table id="table"> <tr> <td>id</td> <td>title</td> </tr> </table> <input type="button" id="more" value="点击加载更多" /> <script type="text/javascript"> var p = 0;#分页数,因为默认我没有获取数据,所以我从0页开始获取数据 var html = '';#稍后拼接的字符串 $("#more").click(function(){ $.ajax({ url:'./ajaxpage.php',#请求的地址 data:{p:p},#传递参数 dataType:'json',#返回数据类型格式 success:function(result){ if(result.length>0){#判断是否有数据返回 html = '';#清空上次执行的得到的值 for(var i = 0;i < result.length ; i++){ #拼接字符串 html += '<tr><td>'+result[i].id+'</td><td>'+result[i].title+'</td></tr>'; } p++;#页码加1 $("#table").append(html);#将拼接好的追加到原来的后面 }else{ alert('没有值'); } } }); }); </script> </body> </html>
大家看了文章不懂的话可以再看视频教程,尽量不要直接复制使用,懂了原理不管你用什么框架和什么程序都能写出ajax分页来。
谢谢大家对本博客的支持,本站专注原创技术文章,三更半夜冒着感冒写文章不易,大家都能看到我的博文基本都在晚上更新,因为白天要上班,所以请尊重原创,杜绝百度上面出现的各种一模一样的帖子,让我们一起努力做更优质的文章。且看且珍惜博主的心得。请转载带上本文链接注明出处。
扫二维码快速加群:
如果大家有什么疑问可以加我QQ327388905进行解答,也可以加入交流群
总赞数量:18274
总踩数量:128087
文章数量:29