In diesem Artikel wird jQuery in Kombination mit PHP und MySQL verwendet, um anhand von Beispielen zu erklären, wie der Ajax-Datenladeeffekt erzielt werden kann.
HTML
<div id="list"> <ul></ul> </div> <div id="pagecount"></div>
wird #list verwendet, um die Datenliste anzuzeigen, einschließlich der in diesem Beispiel anzuzeigenden Produktbilder und Titel, und #pagecount wird verwendet, um die Paging-Leiste anzuzeigen, d. h. die vorherige Seite und die nächste Seite in diesem Beispiel.
Vergessen Sie natürlich nicht, die JQuery-Bibliotheksdatei im Kopf vorab zu laden.
CSS
Wir müssen die Produktbilder anordnen und den Stil der Seitenleiste festlegen. Natürlich kann das Design dieser Stile nach erfolgreichem Lesen entsprechend den Daten festgelegt werden.
#list{width:680px; height:530px; margin:2px auto; position:relative}
#list ul li{float:left;width:220px; height:260px; margin:2px}
#list ul li img{width:220px; height:220px}
#list ul li p{line-height:22px}
#pagecount{width:500px; margin:10px auto; text-align:center}
#pagecount span{margin:4px; font-size:14px}
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3;
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
jQuery
Wir deklarieren zuerst die Variablen und die folgenden Variablen werden im nachfolgenden Code verwendet.
var curPage = 1; //当前页码 var total,pageSize,totalPage; //总记录数，每页显示数，总页数
Als nächstes passen wir eine Funktion an: getData(), um die aktuellen Seitendaten abzurufen. In der Funktion verwenden wir $.ajax(), um eine asynchrone POST-Anfrage an den Hintergrund von „pages.php“ zu senden und die aktuelle Seitennummer im JSON-Format an den Hintergrund zu übergeben.
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: 'pages.php',
data: {'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画
},
success:function(json){
$("#list ul").empty();//清空数据区
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var li = "";
var list = json.list;
$.each(list,function(index,array){ //遍历json数据列
li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title']
+"</a></li>";
});
$("#list ul").append(li);
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
}
Nachdem die Anfrage erfolgreich war und die Daten zurückgegeben wurden, werden die entsprechenden Daten an die Variable angehängt und die zurückgegebene Produktdatenliste wird in einer Schleife zum entsprechenden Container #list ul angezeigt. Wenn die Daten vollständig geladen sind, rufen Sie die Seitenleistenfunktion getPageBar() auf, um eine Seitenleiste zu generieren.
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"条</span><span>"+curPage
+"/"+totalPage+"</span>";
//如果是第一页
if(curPage==1){
pageStr += "<span>首页</span><span>上一页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span>
<span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
}
//如果是最后页
if(curPage>=totalPage){
pageStr += "<span>下一页</span><span>尾页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>
下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a>
</span>";
}
$("#pagecount").html(pageStr);
}
Wenn die Seite zum ersten Mal geladen wird, laden wir schließlich die ersten Seitendaten, nämlich getData(1). Wenn auf den Paging-Link in der Paging-Leiste geklickt wird, wird getData(page) aufgerufen, um die Daten zu laden entsprechend der Seitenzahl. Wir haben die digitale Seitenzahl über die Funktion getPageBar() im Attribut rel der Umblätterverbindung vorab eingebettet.
$(function(){
getData(1);
$("#pagecount span a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});
PHP
Pages.php empfängt jede Ajax-Anfrage für die Front-End-Seite, ruft Daten aus der MySQL-Datenbank basierend auf dem übermittelten Seitenzahl-PageNum-Wert ab, berechnet die Gesamtzahl der Datensätze und Gesamtseiten, liest die Datenliste unter der entsprechenden Seitenzahl und zeigt das Endergebnis in JSON an. Das Format wird an die Frontend-Seite zurückgegeben.
include_once('connect.php'); //连接数据库，略过，具体请下载源码查看
$page = intval($_POST['pageNum']); //当前页
$result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数
$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数
$startPage = $page*$pageSize; //开始记录
//构造数组
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit
$startPage,$pageSize"); //查询分页数据
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
echo json_encode($arr); //输出JSON数据
Kehren Sie jetzt zur Startseite zurück und Sie werden sehen, dass die Daten mit Semikolons versehen wurden, um zu sehen, ob es sich um den gewünschten Effekt handelt Der Stil der Paging-Leiste ist der einfachste.
Schließlich wird die MySQL-Tabellenstruktur angehängt und die Datentabelle ist im heruntergeladenen Quellcodepaket enthalten ^-^ Alles steht für Sie bereit.
CREATE TABLE IF NOT EXISTS `food` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `pic` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Das Obige ist ein Beispiel für die Implementierung von Paging-Anzeigedaten durch jQuery Ajax PHP. Der Ajax-Paging-Effekt sorgt dafür, dass Ihre Website-Daten sehr reibungslos geladen werden.
