ajax+jQuery+PHP实现无刷新分类参考2
2017-12-08 12:32
627 查看
功能描述:以带着参数的形式加载Listinfo页面,形如:
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&id=1
或者是:
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&type=1
完成带条件的查询,输出相关数据到listinfo.html页面
总体思路:走控制器里get方法->html页面ajax请求->走控制器里面的ajax方法回传数据
PHP:
控制器函数分为2个部分
2
3
4
5
6
7
8
9
html:
2
3
4
5
6
7
8
9
js:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
PHP 里面的AJAX处理部分:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
PHP的非AJAX方法
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&id=1
或者是:
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&type=1
完成带条件的查询,输出相关数据到listinfo.html页面
总体思路:走控制器里get方法->html页面ajax请求->走控制器里面的ajax方法回传数据
PHP:
控制器函数分为2个部分
if(IS_AJAX){ //获取相关数据,完成查询,构造结果数组 //具体在最后给出 } else{ //get方法请求页面,获取id or type 一些必要的值 //并且把这些值隐藏到html页面中 //加载页面 }1
2
3
4
5
6
7
8
9
html:
<input id="area_id" type="hidden" value="<?=isset($area_id) ? $area_id:'0';?>"> <input id="is_finish" type="hidden" value="<?=isset($is_finish)? $is_finish : '-1';?>"> <!--设置一些隐藏的input值,ajax提交到listinfo方法--> <div class="container"> <div class="lists"><ul id="ul_lists" class="clearfix"></ul></div> <div class="page" id="page"><li></li></div> </div> <!--一个必要的ul 用来填充页面数据-->1
2
3
4
5
6
7
8
9
js:
var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//定义总记录数,每页条数,总页数 function getData(page) { //获取当前页数据 var w = document.getElementById("is_finish"); //获取input值 var x = document.getElementById("area_id"); var is_finish = w.value; var area_id = x.value; $.ajax({ type: 'GET', url: '需要请求的页面', data: {'page': page - 1,'is_finish':is_finish,'area_id':area_id}, //需要传递的数据 dataType: 'json', success: function(json) { $("#ul_lists").empty(); //清空 total_num = json.total_num;//总记录数 page_size = json.page_size;//每页数量 page_cur = page;//当前页 page_total_num = json.page_total_num;//总页数 var li = ""; var list = json.list; $.each(list, function(index, array) { //遍历返回json //根据json数据拼凑你要的<li> li += "<li class='dd'>" + "<span class='depart'>" +array['area_id']+" " +array['department_id'] + "</span>" + "</li>"; }); $("#ul_lists").append(li); }, complete: function() { getPageBar();//js生成分页,可用程序代替 }, error: function() { alert("数据异常,请检查是否json格式"); } }); } function getPageBar() /*这里有点奇怪的就是注释的位置之前报错,换了换注释的位置,好了,我用的方法是查看源代码。注释在A位置,if条件里没内容,换到了B位置,好了*/ { //js生成分页 var page_str = ''; if (page_cur > page_total_num) { page_cur = page_total_num; }//当前页大于最大页数 if (page_total_num ==1 ) { page_cur = 1;//当前页小于1 page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>"; } else{ if (page_cur == 1) //若是第一页 { page_str += "<span>首页 </span><span>上一页 </span>"; } else { page_str += "<span><a href='javascript:void(0)' data-page='1'>首页 </a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>"; } if (page_cur >= page_total_num) //若是最后页 { page_str += "<span>下一页 </span><span>尾页 </span>"; } else { page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>"; } } page_str += "共"+page_total_num+"页"; $("#page").html(page_str); } $(function() { getData(1);//默认第一页 $("#page a").live('click', function() { //live 向未来的元素添加事件处理器,不可用bind var page = $(this).attr("data-page");//获取当前页 getData(page) }); });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
PHP 里面的AJAX处理部分:
if(IS_AJAX){ //获取隐藏域的参数值构造$condition 查询条件 此处省略 $baoliao_model = M('baoliao'); //实例化模型 $count = $baoliao_model->where($condition)->count(); $max_page = ceil($count/$pagesize); //计算得出分页数 $page_num = I('get.page',0,'intval')+1; //将传进来的页面值过滤 if((empty($page_num)||($page_num<1)||($page_num>$max_page))) $page_num = 1; //对传进来的页面值限定 $baoliao_list = $baoliao_model->where($condition)->order("add_time DESC")->page($page_num.",$pagesize")->select(); //开始构造结果数组 $data = array( "total_num" => $count, "page_size" => $pagesize, "page_total_num" => $max_page, ); foreach($baoliao_list as $v) { $data['list'][] = array( 'title'=>$v['title'], 'verify_time'=>$v['verify_time'], ); } //结果数组构造完毕 ,json格式输出 echo json_encode($data); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
PHP的非AJAX方法
if(IS_AJAX){}else{ $area_id = I('get.id',NULL,'intval'); //获取整形的id值,默认为空 $info_type = I('get.type',NULL,'intval'); //获取整形的type值,默认为空 //对获取的值判断符合条件就输出到模板的hidden域 $this->display();//加载页面 }
相关文章推荐
- PHP+jquery +ajax实现无刷新分类参考
- php+ajax+jquery 实现无刷新分页以及js缓存
- php+JQuery+Ajax简单实现页面异步刷新 (转)
- php+jQuery+Ajax简单实现页面异步刷新
- jQuery+php+mysql,轻松实现ajax无刷新省市二级联动
- 采用Jquery+Ajax+PHP+MySQL实现分类列表管理 - 上篇
- 采用Jquery+Ajax+PHP+MySQL实现分类列表管理 - 下篇
- php+JQuery+Ajax简单实现页面异步刷新
- Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
- php jQuery . Ajax 实现局部刷新分页
- Jquery中的AJax技术结合PHP实现无刷新验证验证码
- php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
- php jquery 实现新闻标签分类与无刷新分页
- Jquery+php+mysql实现上拉加载更多,后端CI,超详细,有示例(其实就是ajax无刷新分页)
- Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
- Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
- Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
- php jquery 实现新闻标签分类与无刷新分页
- php+jQuery+Ajax简单实现页面异步刷新
- jQuery+Ajax+PHP实现异步分页数据显示--js可参考