ajax+jQuery+PHP实现无刷新分类参考2

功能描述：以带着参数的形式加载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个部分

    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>首页&nbsp</span><span>上一页&nbsp</span>";        }        else        {            page_str += "<span><a href='javascript:void(0)' data-page='1'>首页&nbsp</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>";        }        if (page_cur >= page_total_num) //若是最后页        {            page_str += "<span>下一页&nbsp</span><span>尾页&nbsp</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();//加载页面}