AJAXを使って改ページを実現します。
本論文の例では、AJAXのページ別展示を実現するための具体的なコードを共有します。
Fenye.
Fenye.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<script type="text/javascript">
/**
* AJAX
* 1. ajax
* 2.
* 3. ajax
* 4.
*/
function showList(pageNow){
// ajax
var xmlHttp = new XMLHttpRequest();
//
xmlHttp.open('get','./AJAX_Fenye.php?pageNow='+pageNow);
// ajax
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//alert(xmlHttp.readyState);
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
}
//
xmlHttp.send(null);
}
// 1
window.onload = function(){
showList(1);
}
</script>
<body>
<input type="text">
<div id="result">
<!-- ！ -->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX </title>
</head>
<body>
<?php
// php ， pageNow
//
@mysql_connect('localhost','root','');
@mysql_select_db('empmanage');
@mysql_query('set name utf8');
//
$rs = mysql_query('select count(*) from emp');
$rows = mysql_fetch_row($rs);
$recordCount = $rows[0];
// pageSize
$pageSize = 5;
// = /
$pageCount=ceil($recordCount/$pageSize);
// pageNow 1
$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1;
if ($pageNow < 1) {
$pageNow = 1;
}elseif ($pageNow > $pageCount) {
$pageNow = $pageCount;
}
//
$pageStart = ($pageNow-1)*$pageSize;
// ，
$sql = "select * from emp limit $pageStart,$pageSize";
//
$rs = mysql_query($sql);
// php ， pageNow $rs
?>
<table bordercolor="green" border="1">
<tr>
<th>ID</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<?php
//
while ($rows = mysql_fetch_assoc($rs)) {
echo "
<tr>
<td>{$rows['id']}</td>
<td>{$rows['name']}</td>
<td>{$rows['email']}</td>
<td>{$rows['level']}</td>
</tr>
";
}
?>
<tr>
<td colspan='4'>
<?php
// js showList() $i=$pageNow
for ($i=1; $i <= $pageCount; $i++) {
echo "<a href = 'javascript:void(0)' onclick = 'showList($i)'>{$i}</a> ";
}
?>
</td>
</tr>
</table>
</body>
</html>