帮助中心-

B2C商城开发手册开发教程

Ajax分页

tpshop的ajax分页

tpshop 10行js 代码解决复杂多条件的ajax分页
首先tpshop的ajax分页在 http://www.99soubao.com/tpshop_video/video.html 视频教程中讲的很清楚，你可以先看看这里的视频教程，但是录制这视频教程是用高分辨率的显示器录制的，一般的笔记本会显示不全，请你找个台式机观看这讲视频。

接下来文字方面说明 tpshop 简单的ajax 分页。先看tpshop后台如下图

从上图可以看出 ajax 分页不光是分页， 而且还有搜索框 下拉框 关键词搜索， 

一般的开发者认为 

http://www.tp-shop.cn?m=Admin&c=Goods&a=goodsList&p=1& +

 一些搜索条件 会写一大堆js 将上面的搜索条件一个个获取， 然后组装成url链接地址附在地址栏后面。

然后再服务器请求回来 再用一大堆js 接收一个json数据，再用js 解释json数据 再通过遍历json数组 一个个组合 tr 然后插入到表格里面去。

分析一下， 这种写法 至少几十上百行js代码， 复杂， 做法非常愚蠢.....

庆幸的是tpshop开发者， 重要js代码只采用了一行js代码 解决了原来上百行的条件组装代码， 

更庆幸的是， tpshop开发者 又用了 重要的js 一行代码解决了 ajax 返回 插入表格中。

那就是将筛选条件放入一个 form表单中， 然后通过点击下一页时，通过ajax提交form表单。 而返回时不采用数据拆装组装形式， 直接采用返回模板形式。

看以下请求代码

    // ajax 抓取页面 form 为表单id  page 为当前第几页

    function ajax_get_table(form,page){

        cur_page = page; //当前页面 保存为全局变量

            $.ajax({

                type : "POST",

                url:"/index.php?m=Admin&c=goods&a=ajaxGoodsList&p="+page,//+tab,

                data : $('#'+form).serialize(),// 重要代码在这行，请求时一行代码将所有条件提交

                success: function(data){

                    $("#ajax_return").html('').append(data); // 重要代码在这行返回时一行代码解决

}

});

}

从上面可以看出， tpshop请求将筛选条件放到一个form 中，然后通过$('#'+form).serialize(),
将表单提交，在php后端跟平时往常处理一样不需要做任何改变，然后php返回时跟平时往常 $this->display();一样没有任何区别，回到 ajax 时通过$("#ajax_return").html('').append(data); 将返回的模板覆盖到表格中，另外在请求ajax时顺便附上当前页数page 详细代码请参考TPshop商品分页列表，详细查看