文章目录
  1. 1. 实例
    1. 1.1. HTML页面
    2. 1.2. javascript
    3. 1.3. PHP页面
  2. 2. 总结

前一段时间第一次使用AJAX进行开发,写了一篇blog PHP(二)-Ajax 对其使用进行了简单介绍,当时举的例子是异步显示一张用户信息table,做完该功能没多久发现一个问题:当用户数据增多之后,不可能把所有的用户信息都放在一页中吧?于是就决定做一个分页,因为想实现html和php的完全分离,所以决定在AJAX的基础上结合js进行分页设置。

实例

下面就直接上代码吧,例子接着之前那篇博文,大家可以先参考一下之前的文字。

HTML页面

<!DOCTYPE html>
<head>
<meta charset="UTF-8">

<title>Admin Manage Page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/admin-main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="js/getUser.js"></script>
<script type="text/javascript">
    pageCount = getPageCount(document.getElementById('key').value);

    function showPage(pageCount,currentPage) {
        var page =     document.getElementById('page');
        page.innerHTML =""; 

        if(currentPage>1) {
            var li = document.createElement("li");
            var a = document.createElement("a");
            a.href="javascript:aaa("+1+")";
            a.innerHTML="首页";
            li.appendChild(a);
            page.appendChild(li);
        }


        for(i=currentPage-2; i<=currentPage+2; i++) {
            if(i>=1&&i<=pageCount){
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.href="javascript:aaa("+i+")";
                a.innerHTML=i;
                li.appendChild(a);
                page.appendChild(li);    
            }

        }

        if(currentPage<pageCount) {
            var li = document.createElement("li");
            var a = document.createElement("a");
            a.href="javascript:aaa("+pageCount+")";
            a.innerHTML="尾页";
            li.appendChild(a);
            page.appendChild(li);
        }

    } 

    function aaa(xx) {

       var key = document.getElementById('key').value;
       showUser(key,xx,showPage);
     }

     function search() {

       var key = document.getElementById('key').value;
       showUser(key,1,showPage);
     }

</script>
</head>

<body onLoad="search();">
      <div class="container">
          <h1>报名用户列表</h1>
        </br></br>

        <div class="row">
             <div class="col-lg-6">
                <div class="input-group">
                  <input id="key" name="key" type="text" class="form-control"  onKeyUp="showUser(this.value,1,showPage);">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" onClick="javascript:search();">Search!</button>
                  </span>
                </div>
              </div>
             <button type="button" class="btn btn-primary" style="margin-left:100px;"  onClick="showUser('',1,showPage);">查看所有</button>  
             <button type="button" class="btn btn-primary" style="margin-left:100px;" onClick="location='excel.php'">导出excel</button>
        </div>


      <div class="content">
         <div class="panel panel-info">

         <div id="txtHint"></div>

         </div>

         <!--分页-->
         <div class="pagediv">
             <ul id="page" class="pagination pagination-lg">

            </ul>
         </div>

      </div>
    </div> 

</body>
</html>

主要是增加了showPage的方法,用于显示分页的效果。

javascript

var xmlHttp

function showUser(str,currentPage,showPage)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getUser.php"
url=url+"?q="+str
url=url+"&currentPage=" + currentPage
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=function() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
     document.getElementById("txtHint").innerHTML=xmlHttp.responseText.split("+")[1]
     showPage(xmlHttp.responseText.split("+")[0],currentPage)
     } 
}
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}



function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     //Internet Explorer
     try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
     catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
 }
return xmlHttp;
}

由上面的JS代码可以发现,当我们回去到服务器端返回的信息xmlHttp.responseText之后,我们对其进行了字符串的分割,字符串信息包括两部分,第一段是搜索结果的总页数,第二段是对table的绘制。然后showUser函数和之前还多了第三个参数,传入的是一个函数showPage,该函数是在html页面中JS模块写好的,然后当我们获取了总页数之后将调用showPage。

PHP页面

<?php
session_start();
error_reporting(0);
//检测是否登录,若没登录则转向登录界面
if(!isset($_SESSION['id'])){
      header("Location:admin.html");
    exit();
}

//设置分页的一些基本数据
$pageSize = 20;


//包含数据库连接文件
include('conn.php');

$q=$_GET["q"];
$currentPage = $_GET["currentPage"];
$sql="SELECT * FROM user WHERE name like '%".$q."%'";

if($q==""){
    $sql="SELECT * FROM user";
}

//计算查询记录总条数
$result = mysql_query($sql) or die(mysql_error());
$rowCount = mysql_num_rows($result);

//计算分页总页数
$pageCount = ceil($rowCount/$pageSize);

$page_sql = $sql." limit ".($currentPage-1)*$pageSize.",".$pageSize."";
$page_result = mysql_query($page_sql);

//将总页数传到前台
echo $pageCount."+";

//绘制table
echo "<table class='table table-bordered table-striped'>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Date</th>
</tr>";

while($row = mysql_fetch_array($page_result))
 {
 echo "<tr>";
 echo "<td>" . $row['id'] . "</td>";
 echo "<td>" . $row['name'] . "</td>";
 echo "<td>" . $row['phone'] . "</td>";
 echo "<td>" . $row['date'] . "</td>";
 echo "</tr>";
 }
echo "</table>";

?>

总结

AJAX传递数据到html页面:

  1. 可以直接在php中直接将页面绘制出来
  2. 可以只传递数据,然后调用html中写的函数
  3. 或者将数据直接传递到前台,不过文件要改为.php文件。
文章目录
  1. 1. 实例
    1. 1.1. HTML页面
    2. 1.2. javascript
    3. 1.3. PHP页面
  2. 2. 总结