ajax/php/javascript实现分页-优快云博客

本文链接：https://blog.youkuaiyun.com/less_cold/article/details/52326009

本文介绍了一种使用jQuery实现的图片分页加载方案，通过AJAX从服务器获取图片及描述信息，并动态生成页面元素。文章包含完整的HTML、JavaScript及PHP代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码如下

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">
<title>很多图片的</title>
<script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
</head>
<html lang="en">
<script type="text/javascript">
$(function(){
	$.ajax({
                type: "GET", 
                url: 'mpicture.php', 
				dataType: "json", //数据格式:JSON
				data: {'page':0
                },
                success: function (data) {
				var html='';
				var num =eval(data)[3][0];
				for(i=0;i<2;i++){//这里的2是一页显示多少条
				  html = html+'<div><img src="'+eval(data)[0][i]+'"><p>'+eval(data)[2][i]+'</p>';
				  }		
				//alert (html);
				page=num/2;
				page=Math.ceil(page);//得到总页数
				html = html+'<p>总共有'+num+'条数据，共有'+page+'页</p>';
				for(i=0;i<page;i++){
				b=i+1;
				html = html+'<a onclick="clickpage('+b+')">'+b+'</a>';
				}
				document.write(html);  
				}
			});  
})
function clickpage(i)
{
$.ajax({
                type: "GET", 
                url: 'mpicture.php', 
				dataType: "json", //数据格式:JSON
				data: {'page':i
                },
                success: function (data) {
				var html='';
				var num =eval(data)[3][0];
				for(i=0;i<2;i++){//这里的2是一页显示多少条
				  html = html+'<div><img src="'+eval(data)[0][i]+'"><p>'+eval(data)[2][i]+'</p>';
				  }		
				//alert (html);
				page=num/2;
				page=Math.ceil(page);//得到总页数
				html = html+'<p>总共有'+num+'条数据，共有'+page+'页</p>';
				for(i=0;i<page;i++){
				b=i+1;
				html = html+'<a onclick="clickpage('+b+')">'+b+'</a>';
				}
				document.write(html);  
				}
			}); 
}
</script>
</html>

PHP如下

<?php
header('Content-type:text/json;charset=utf-8');
@ $db = mysqli_connect('localhost','root','');
mysqli_select_db($db,'mpicture');//找到数据库mpicture
if(mysqli_connect_errno()){
 echo "Error:Could not connect to mysqli database.";
 exit;
}
$page=$_GET['page'];
if($page==3){
$a=0;
$b=$page;
$p="SELECT * FROM picture limit $a,$b;";//对表picture进行选择
}else{
	$p="SELECT * FROM picture where id=$page";
}
$q="SELECT count(*) FROM picture";
$result = mysqli_query($db,$p);//执行$p的mysql语句，并赋给result
$result1 = mysqli_query($db,$q);
$row1 = mysqli_fetch_array($result1);
$rownum = mysqli_num_rows($result);//获取result的数据数量
$picture=array(array());
for($i=0;$i<$rownum;$i++){
    $row = mysqli_fetch_assoc($result);//获取result的一条数据
	$picture[0][$i]= $row['path1'];//获得缩略图的路径
	$picture[1][$i]= $row['path2'];//获得全图的路径
	$picture[2][$i]= $row['title'];//获得文字描
	$picture[3][$i]= $row['Id'];
}
$picture[4][0]=$row1[0];
echo json_encode($picture);
?>