Ajax分页
tpshop的ajax分页
tpshop 10行js 代码解决复杂多条件的ajax分页
首先tpshop的ajax分页在 http://www.99soubao.com/tpshop_video/video.html 视频教程中讲的很清楚， 你可以先看看这里的视频教程， 但是录制这视频教程是用高分辨率的显示器录制的， 一般的笔记本会显示不全， 请你找个台式机观看这讲视频。
接下来文字方面说明 tpshop 简单的ajax 分页。 先看tpshop后台如下图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 从上图可以看出 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); // 重要代码在这行返回时一行代码解决 } }); } |