php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo...
先上效果:
刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了!
新建index.php
jQuery+php实现点击按钮加载更多
*{margin: 0;padding:0;list-style: none;}
a{color: #333;text-decoration: none;}
.hidden{display:none;}
.content{width: 300px;height:auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
.content ul.list{overflow: hidden;}
.content ul.list li{width: 300px;height:auto;margin:5px;float:left;overflow:hidden;text-align:center;}
.content .more{overflow: hidden;padding:10px;text-align: center;}
.content .more a{display: block;width: 120px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:100px;font-size: 15px;}
.content .more a:hover{text-decoration: none;background: red;color: #fff;}
//获取数据
require_once("connect_sql.php");
?>
- 数据加载中,请稍后...
var _content = []; //临时存储li循环内容
var loadding = {
_default:3, //默认个数
_loading:3, //每次点击按钮后加载的个数
init:function(){
var lis = $(".content .hidden li");
$(".content ul.list").html("");
for(var n=0;n
lis.eq(n).appendTo(".content ul.list");
}
for(var i=loadding._default;i
_content.push(lis.eq(i));
}
$(".content .hidden").html("");
},
loadMore:function(){
var mLis = $(".content ul.list li").length;
for(var i =0;i
var target = _content.shift();
if(!target){
$('.content .more').html("
已加载全部...
");
break;
}
$(".content ul.list").append(target);
}
}
}
loadding.init();
上面是页面的布局,其中内嵌了php代码,这部分的代码其实就是查询数据库并输出数据库的所有数据。注意,index.php里面需要引入jQuery库,jquery.min.js自己可以去网上下载这个压缩版的。我把php代码全部用一个独立文件connect_sql.php写,然后通过
//获取数据
require_once("connect_sql.php");
?>
直接引入到index.php中
新建connect_sql.php
//页面字符编码
header("Content-type:text/html;charset=utf-8");
//隐藏报错信息
error_reporting(E_ALL^E_NOTICE^E_WARNING);
//数据库地址
$host="localhost";
//数据库账号
$username="root";
//数据库密码
$password="root";
//数据库名
$db="loadMore";
//数据库表名
$tb="list";
//连接数据库
$con = mysql_connect($host,$username,$password);
if (!$con)
{
die('连接数据库失败,失败原因:' . mysql_error());
}
//设置数据库字符集
mysql_query("SET NAMES UTF8");
//查询数据库
mysql_select_db($db, $con);
//获取数据
$result = mysql_query("SELECT * FROM $tb ORDER BY id ASC");
while($row = mysql_fetch_array($result)){
echo "
".$row[title]."";
echo "
";
}
?>
connect_sql.php就是简单的数据库查询并输出,但是输出的内容必须是套在
里面的。当然如果你想套在其他的标签里,那就在index.php里的js脚本里面自己改。
下面是数据库:
数据库账号,密码,地址这个根据自己的开发配置填,我的代码里面,数据库名为loadMore,表名为list
下面是结构截图:
Ok就这么多了
很简单吧!
本教程由里客云资源站提供
http://www.likeyunba.com/
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo...相关推荐
- HTML5期末大作业:汽车销售网站模板设计(7个页面) HTML+CSS+JavaScript 企业网页设计源码
HTML5期末大作业:汽车销售网站模板设计(7个页面) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你还在为HTML网 ...
- HTML5期末大作业:茶叶网站设计——中国茶文化(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:茶叶网站设计--中国茶文化(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- 13HTML5期末大作业:影视网站设计——威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:影视网站设计--威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- HTML5期末大作业:影视网站设计——威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:影视网站设计--威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- HTML5期末大作业:旅游景点网站设计——北京故宫(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:旅游景点网站设计--北京故宫(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- 使用Python获取数字货币价格(附完整源码)
使用Python获取数字货币价格(附完整源码) 如果你想要及时了解到加密货币的价格变化,你可以使用Python获取数字货币的实时价格.本文将介绍如何使用Python和CoinGecko API获取数字 ...
- 开发了一款基于 Flask 框架的在线电影网站系统(附 Python 源码)
文章目录 前言 项目介绍 源码获取 运行环境 安装依赖库 项目截图 首页展示图 视频展示页 视频播放页 后台管理页 整体架构设计图 项目目录结构图 前台功能模块图 后台功能模块图 本地运行图 前言 今 ...
- 圣诞来了,给喜欢的人做个表白网站(附完整源码)
文章目录 一.演示 二.部分源码展示 三.完整源码 一.演示 表白网站 b站:川川菜鸟 二.部分源码展示 <html><!DOCTYPE HTML><html> & ...
- 【网站国际化必备】Asp.Net MVC 集成Paypal(贝宝)快速结账 支付接口 ,附源码demo...
开篇先给大家讲段历史故事,博主是湖北襄阳人.襄阳物华天宝,人杰地灵,曾用名襄樊.在2800多年的历史文化中出现了一代名相诸葛亮(卧龙),三国名士庞统(凤雏),魏晋隐士司马徽(水镜先生),唐代大诗人孟浩 ...
最新文章
- OpenCvSharp_FindContours函数参数详解
- ios swift ios8 模糊
- x5675相当于e5_至强X5675比I7 2600强多少 至强X5675相当于几个AMD X2 220
- ad软件 pcb如何走线过孔_【经验】关于高速PCB设计的一些经典问答
- JAXB 有两个名为 ** 的属性,类的两个属性具有相同名称 **解决方案
- vue 绑定图片相对路径
- 十字链表计算矩阵乘积 c语言,求用十字链表实现矩阵相加算法(C语言)急!!!...
- Spring Data JPA事务管理
- 如何让普通用户可以对DBA_SOURCE视图进行闪回查询?
- 关于Raspberry Pi,Python等的6本书
- 脚本加密http://www.datsi.fi.upm.es/~frosal/sources/
- Android中图像变换Matrix的原理应用
- 起II6.0中使用windows2003自带的虚拟主机管理系统
- [Qt扒手2] PyQt5 路径绘画例子
- fiddler2抓包工具使用图文教程
- Eclipse离线安装Svn插件
- 清华大学《走进心理学》2021春学堂在线参考答案
- PHP表格数据Excel转图片输出通用方法,列可自动拓展
- python物性库能调用哪些物质_Python 调用 CoolProp 计算介质的物性
- linux c: 静态库和动态库的生成和使用