有了基础页面的支撑，想要提高页面的用户体验，那么异步的数据加载目前来说是最好的处理方式了。Ajax分页是练手的最好应用场景，运用到的知识点，在上节课老友记之PHP7留言板开发（Ajax异步提交）已经有了一定的介绍，这里就不再敖述，如有明白请看上节内容。

教程分解

• 1、定义gotopage(){}函数

  JavaScript具有基于函数的作用域，只要定义了，当前页面的是全局可用的，标识就是gotopage。

• 2、Ajax异步操作

  上节课的内容，这里最要是异步请求的时候注意是GET方式，ajax.php是异步请求服务端需要处理的逻辑文件，接收用户翻页请求，返回响应页数的数据即可（当然其他格式的内容就行，比如JSON，这里就不讲解）。

• 3、JS打印数据innerHTML

在指定的页面区域打印翻页数据

，这里的样式结构是要在ul标签内输出内容，所以用JS选择器document.getElementById("list_box")，获取ul标签的对象，然后运用其中的innerHTML属性赋值内容，完成我们想要的结果document.getElementById("list_box").innerHTML = '服务器返回的数据';
• 4、JS循环for的运用，遍历所有页码并标识当前页码

用选择器获取所有的页面对象var pageno = document.getElementsByClassName('pageno');
计算总页码数量pageno.length
for循环遍历直到匹配到当前用户请求的page页码数即当前页，匹配成功就给当前页数添加样式（标识当前请求成功的页数）。

本教程基于老友记之PHP7留言板开发（分页）内容上改动。

HTML代码list.php

    
        
        
        
        
        
    
    
        
        
        
            
                留言板
                LIST
            

            
                
                    
                关键词：" />
                
                
                

                
                    
                    
姓名： 联系方式： 内容：
                    
                

姓名：". $rows['name']." 联系方式：". $rows['contact']." 内容：".$rows['content']."";
}

echo $list;
exit;