php+ajax实现无刷新动态加载数据技术 - 测试用了,效果还行
2016-12-28 10:26
736 查看
php+ajax实现无刷新动态加载数据技术 - 测试用了,效果还行
感觉IE下略慢,非IE速度可以,好像是不能用jquery-1.11.1.min.js,只能用网上找的代码中提供的JQuery.js我也不知道版本,我这里改名叫jquery_for_ajax.js了
由于一开始就是直接调用ajax显示最开始的一页数据,感觉加载有点慢,我再找找其它的版本也,这个是我测试能用的一个而已。记录一下
一、HTML页中就只涉及到这些,id=lists这个DIV中显示动态加载的数据,nodata这个DIV中显示的是提醒信息,比如到最后,就显示全部加载完成了。
二、JS部分,这部分可以单写在.js中,也可以直接写在HTML页中
三、ajax.php
打包下载
感觉IE下略慢,非IE速度可以,好像是不能用jquery-1.11.1.min.js,只能用网上找的代码中提供的JQuery.js我也不知道版本,我这里改名叫jquery_for_ajax.js了
由于一开始就是直接调用ajax显示最开始的一页数据,感觉加载有点慢,我再找找其它的版本也,这个是我测试能用的一个而已。记录一下
一、HTML页中就只涉及到这些,id=lists这个DIV中显示动态加载的数据,nodata这个DIV中显示的是提醒信息,比如到最后,就显示全部加载完成了。
<div id="lists"></div> <div class="nodata"></div>
二、JS部分,这部分可以单写在.js中,也可以直接写在HTML页中
<script type="text/javascript"> i = 1; //设置当前页数 //var tagId = <?echo $tagId;?>;//如果需要传参数,这里设计变量,下面getJSON时可以传 $(function() { var totalpage = <?echo $total;?>; //总页数,防止超过总页数继续滚动,可以只写数字,我这里是通过php程序先算出有多少页了. var winH = $(window).height(); //页面可视区域高度 $(window).scroll(function() { if (i < totalpage) { // 当滚动的页数小于总页数的时候,继续加载 var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.01) { getJson(i) } } else { //否则显示无数据 showEmpty(); } }); getJson(0); //加载第一页 }); function getJson(page) { $(".nodata").show().html("<img src='loading.gif'/>"); $.getJSON("ajax.php", {page: i}, function(json) { //如果需要传参数,这里可以传{page: i, tagId:tagId} if (json) { var str = ""; $.each(json, function(index, array) {//下面这块是css代码来显示样式,数据是通过array数组传回来动态显示在这里 var str = "<div class=\"newsitem-mes\">"; var str = str + "<div class=\"newsitem-mes-title\">"; var str = str + "<a href=\"view.php?id=" + array['id'] + "\" target=\"_blank\">" + array['title'] + "</a>"; var str = str + "<div class=\"newsitem-content\">"; var str = str + "<div class=\"time\">" + array['submitTime'] + "</div>"; var str = str + "<div class=\"badge\">" + array['pushNum'] + "</div>"; var str = str + "</div>"; var str = str + "</div>"; $("#lists").append(str); }); $(".nodata").hide() } else { showEmpty(); } }); i++; } function showEmpty() { $(".nodata").show().html("全部信息都在这儿了......"); } </script>
三、ajax.php
<? //这里写的是数据库编码,我用的是GBK header("Content-type: text/html; charset=GBK"); /*数据库连接参数*/ $HOSTNAME="localhost"; $USERNAME="root"; $PASSWORD=""; $DATABASE01="test"; $connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD"); mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'"); /*数据库连接参数*/ $page = intval($_GET['page']); //获取请求的页数 $pagenum = 30; //每页数量 $start = ($page - 1) * $pagenum; $sqlajax="select * from news order by submitTime desc limit $start,$pagenum"; $resultajax=mysql_query($sqlajax,$connect); $arr = array(); //定义一个数组先 while ($rowajax = mysql_fetch_array($resultajax)) { $arr[] = array( 'title' => iconv('GBK','UTF-8',$rowajax['title']) , //ajax传中文只能是UTF-8,所以有中文的注意转码先,因为我的数据库都用的GBK,所以要用php中的iconv函数转成UTF-8,数字或英文的不用转 'submitTime' => substr($rowajax['submitTime'],0,10), 'pushNum' => $rowajax['pushNum'] ); } mysql_free_result($resultajax); if ($arr) { echo json_encode($arr); //转换为json数据输出 } ?>
打包下载
相关文章推荐
- php+ajax实现无刷新动态加载数据技术
- php+ajax实现无刷新动态加载数据技术
- PHP+jQuery实现滚屏无刷新动态加载数据功能详解
- php+ajax实现无刷新动态加载数据技术
- thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)
- 关于动态加载的数据实现单选可取消的效果 并且附带 ScrollView滑动到指定位置
- 滚屏加载--无刷新动态加载数据技术的应用
- PHP + JavaScript + Ajax 实现无刷新页面加载效果
- thinkphp滚屏加载--无刷新动态加载数据技术的应用
- PHP + JavaScript + Ajax 实现无刷新页面加载效果
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- Ajax+PHP实现动态无刷新技术
- 滚屏加载--无刷新动态加载数据技术的应用
- 滚屏加载--无刷新动态加载数据技术的应用
- 测试代码,解决java gui swing多线程界面假死、僵死问题,实现界面动态刷新,动态同步更新数据
- 滚屏加载--无刷新动态加载数据技术的应用
- 滚屏加载----无刷新动态加载数据技术
- 滚屏加载--无刷新动态加载数据技术的应用
- jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo
- jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果