PHP Ajax 页面无刷新 翻页

相信学习php的大部分都了解ajax实现网页局部刷新技术。因为互联网的发展需求要求我们必须做到。如果连基本的ajax都不会。用户体验该会是多么的糟糕啊!网站中用到ajax的时候很多。例如:用户留言评论的时候,只刷新评论。用户注册的时候、实现文本框失去焦点判断用户手机号是否被注册、根据文本框中输入的汉子进行提示等等。我今天就给大家分享一个ajax和php实现局部刷新分页的代码,下面列出了数据库和三个文件:

用户数据库为student.sql

create database page;
use page;
create table student(
 id int(128) not null auto_increment,
 name char(32) not null default '',
 sex int(2) not null default '0',
 age int(8) not null default '0',
 tel int(16) not null default '0',
 email char(32) not null default '',
 primary key(id)
);
insert into student values
     (1, 'zhangsan', 1, 24, 11111111, 'zhangsan@163.com'),
     (2, 'lisi', 0, 12, 2222222, 'aaaa@aaaa.com'),
     (3, 'wangxiao', 1, 23, 3333333, 'bbbb@bbbb.com'),
     (4, 'wangya', 0, 34, 444444444, 'cccc@cccc.com'),
     (5, 'wansy', 1, 45, 555555555, 'ddddd@ddddd.com'),
     (6, 'liudehua', 0, 56, 66666666, 'eeee@eeee.com'),
     (7, 'zhangziyi', 1, 78, 77777777, 'ffff@ffff.com'),
     (8, 'ziyi', 0, 89, 888888888, 'ggggg@gggg.com'),
     (9, 'www', 1, 22, 999999999, 'iiii@iiii.com');


js文件 http.js代码为:
var http_request=false;
   function send_request(url){ //初始化,指定处理函数,发送请求的函数
     http_request=false;
     //开始初始化XMLHttpRequest对象
     if (window.XMLHttpRequest){ //Mozilla浏览器
      http_request= new XMLHttpRequest();
      if (http_request.overrideMimeType){ //设置MIME类别
        http_request.overrideMimeType( "text/xml" );
      }
     }
     else if (window.ActiveXObject){ //IE浏览器
      try {
       http_request= new ActiveXObject( "Msxml2.XMLHttp" );
      } catch (e){
       try {
       http_request= new ActiveXobject( "Microsoft.XMLHttp" );
       } catch (e){}
      }
     }
     if (!http_request){ //异常,创建对象实例失败
      window.alert( "创建XMLHttp对象失败!" );
      return false;
     }
     http_request.onreadystatechange=processrequest;
     //确定发送请求方式,URL,及是否同步执行下段代码
     http_request.open( "GET" ,url,true);
     http_request.send(null);
   }
   //处理返回信息的函数
   function processrequest(){
    if (http_request.readyState==4){ //判断对象状态
      if (http_request.status==200){ //信息已成功返回,开始处理信息
       document.getElementById(reobj).innerHTML=http_request.responseText;
      }
      else { //页面不正常
       alert( "您所请求的页面不正常!" );
      }
    }
   }
   function dopage(obj,url){
    document.getElementById(obj).innerHTML= "正在读取数据..." ;
    reobj = obj;
    send_request(url);
    }

前端显示页面 index.php

<?php
//header("Content-type: text/html;charset=utf-8");//输出编码,避免中文乱码
?>
<html>
<head>
<title>ajax分页演示</title>
<script language= "javascript" src= "http.js" ></script>
</head>
<body>
<center>
<h1>学生信息查询系统</h1>
<br>
<div id= "result" >
<script>
  dopage( 'result' , 'page.php' )
</script>
</div>
  
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<p>      
</center>
</body>
</html>

后台处理页面 page.php

<?php
//header("Content-type: text/html;charset=utf-8");//输出编码,避免中文乱码
$page =isset( $_GET [ 'page' ])? intval ( $_GET [ 'page' ]):1;        //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。
$num =3;                                      //每页显示3条数据
  
$db =mysql_connect( "localhost" , "root" , "123456" );           //创建数据库连接
mysql_select_db( "page" );                 //选择要操作的数据库
mysql_query( "set names utf8" );
/*
首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是
总数据库除以每页显示的条数,有余进一。
也就是说10/3=3.3333=4 有余数就要进一。
*/
$result =mysql_query( "select * from student" );
$total =mysql_num_rows( $result ); //查询所有的数据
$url = 'page.php' ; //获取本页URL
//页码计算
$pagenum = ceil ( $total / $num );                                    //获得总页数,也是最后一页
$page =min( $pagenum , $page ); //获得首页
$prepg = $page -1; //上一页
$nextpg =( $page == $pagenum ? 0 : $page +1); //下一页
$offset =( $page -1)* $num ;                                        //获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。
//开始分页导航条代码:
$pagenav = "显示第 <B>" .( $total ?( $offset +1):0). "</B>-<B>" .min( $offset +10, $total ). "</B> 条记录,共 $total 条记录 " ;
//如果只有一页则跳出函数:
//if($pagenum<=1) return false;
$pagenav .= " <a href=javascript:dopage('result','$url?page=1');>首页</a> " ;
if ( $prepg ) $pagenav .= " <a href=javascript:dopage('result','$url?page=$prepg');>前页</a> " ; else $pagenav .= " 前页 " ;
if ( $nextpg ) $pagenav .= " <a href=javascript:dopage('result','$url?page=$nextpg');>后页</a> " ; else $pagenav .= " 后页 " ;
$pagenav .= " <a href=javascript:dopage('result','$url?page=$pagenum');>尾页</a> " ;
$pagenav .= "</select> 页,共 $pagenum 页" ;
//假如传入的页数参数大于总页数,则显示错误信息
If( $page > $pagenum ){
        Echo "Error : Can Not Found The page " . $page ;
        Exit ;
}
$info =mysql_query( "select * from student limit $offset,$num" );   //获取相应页数所需要显示的数据
echo "<table border=3 width=600>" ;
While( $it =mysql_fetch_array( $info )){
  echo "<tr>" ;
        Echo "<td>" . $it [ 'id' ]. "</td>" ;
        Echo "<td>" . $it [ 'name' ]. "</td>" ;
        Echo "<td>" . $it [ 'sex' ]. "</td>" ;
        Echo "<td>" . $it [ 'age' ]. "</td>" ;
        Echo "<td>" . $it [ 'tel' ]. "</td>" ;
        Echo "<td>" . $it [ 'email' ]. "</td>" ;
        echo "</tr>" ;
} //显示数据
echo "</table>" ;
echo "<br>"
echo $pagenav ; //输出分页导航
   
?>

这样就可以了哦。只是我没有对网站界面进行美化哦。可以根据自己的需要想法对样式进行处理哈!


转自:blog.163.com/sun_jian_zhang/blog/static/187804041201222811453037/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值