通过ajax调用php生成json转给js,生成html

lujiguo115

php代码
1 function onDate()
2    {
3        @$month            = !isset($_POST['month'])? date('n') : $_POST['month'];
4        @$year            = !isset($_POST['year'])? date('Y') : $_POST['year'];
5        //某月的总天数
6        $count_month    = date("t", mktime(0, 0, 0, $month, 1, $year));
7        //某月的开始时间
8        $start_time     = mktime(0, 0, 0, $month, 1, $year);
9        //某月的结束时间
10        $end_time        = mktime(23, 59, 59, $month, $count_month, $year);
11        //取出这个有日记的所有数据
12        $data            = $_ENV['Diray']->getByTimeDirayList($start_time, $end_time);
13        $arr_data          = $data;
14        $index             = 0;
15        //将取出的时间戳， 转换成时间， 再整理成数组
16        foreach ($data as $row)
17        {
18            $arr_data[$index]['year']         = date("Y", $row['select_time']);
19            $arr_data[$index]['month']        = date("n", $row['select_time']);
20            $arr_data[$index]['day']        = date("j", $row['select_time']);
21            $index++;
22        }
23        //将php数据数组转换成json
24        $json_string = json_encode($arr_data);
25        //ajax调用
26        if (isset($_POST['month']) && isset($_POST['year']))
27        {
28            echo $json_string;
29            exit;
30        }
31        else
32        {
33            $this->assign('year', $year);
34            $this->assign('month', $month);
35            $this->assign('data', $json_string);
36            //config文件变量初始化
37            $this->initSpace();
38            $this->display("diray/date2.php");
39        }
40    }　　
　　js代码：

js代码：
  1function prev() {
  2     var prav_year=$('#year_hidden').val();
  3    var prav_month=$('#month_hidden').val();
  4    var prav_month =parseInt(prav_month) - 1;
  5    if (prav_month < 1)
  6     {
  7       var prav_month = 12;
  8       prav_year = parseInt(prav_year) - 1;
  9     }
10    $.ajax({
11        type:"POST",
12        url: 'diray.php?m=diray&a=date',
13        data: "month="+prav_month+"&year="+prav_year,
14        dataType:"json",
15        success:function(msg){
16        showCalender(msg, prav_year, prav_month);
17        }
18    });
19 }
20   
21function next(){
22   var back_year=$('#year_hidden').val();
23   var back_month=$('#month_hidden').val();
24   var back_month =parseInt(back_month) + 1;
25   if (back_month > 12)
26   {
27       var back_month = 1;
28       back_year = parseInt(back_year) + 1;
29   }
30    $.ajax({
31        type:"POST",
32        url: 'diray.php?m=diray&a=date',
33        data: "month="+back_month+"&year="+back_year,
34        dataType:"json",
35        success:function(msg){
36            showCalender(msg, back_year, back_month);
37        }
38    });
39}
40
41function showCalender(data, year, month){
42    var arr = data;
43    $(function(){
44        var maxDaysOfMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
45        var cur_date = new Date(),cur_year,cur_month,cur_day;
46        //传入参数
47        cur_year = year;
48        cur_month = month;
49        if (isLeapYear(cur_year)) maxDaysOfMonth[1] = 29;
50        var now_date = new Date();
51        now_date.setFullYear(cur_year);
52        now_date.setMonth(cur_month - 1);
53        now_date.setDate(1);
54        $("#year").html("");
55        $("#month").html("");
56        $('#year_hidden').val(cur_year);
57        $('#month_hidden').val(cur_month);
58        $('#year').append(cur_year+"年");
59        $('#month').append(cur_month+"月");
60        //第一天星期几
61        weekOf1stDay = now_date.getDay();
62        maxDays = maxDaysOfMonth[cur_month - 1] == 7? maxDaysOfMonth[cur_month - 1] : maxDaysOfMonth[cur_month - 1] + weekOf1stDay;
63        var j = 1;
64        var k = 0;
65        for (var clean=1;clean <= 42; clean++ )
66        {
67            $("#date"+clean).html("");
68            $('#date'+clean).removeClass('today');
69        }
70        for (var i = 1; i <=  maxDays; i++)
71        {
72            var have_value = true;
73            if (i > weekOf1stDay || weekOf1stDay == 7)
74            {
75                for (var k in arr)
76                {
77                    if(arr[k]['day'] == j)
78                    {
79                         have_value = false;
80                         //$("#date"+i).html("");  //以后做成div, 现在有两个数据的都清除了
81                         $('#date'+i).html("<a href='#'>"+j+"</a>");
82                    }               
83                }
84                if (have_value)
85                {
86                    //$("#date"+i).html("");
87                    $("#date"+i).html(j);
88                }
89                if(cur_year == cur_date.getFullYear() && cur_month == cur_date.getMonth() + 1 && j == cur_date.getDate())
90                {
91                     $('#date'+i).addClass('today');
92                }
93                j++;
94            }
95            else
96            {
97                //$("#date"+i).html("");
98                $("#date"+i).html("");
99            }
100        }
101    });
102}
103function isLeapYear(year){
104    if(year % 4 ==0 || (year % 400 == 0 && year % 100 != 0)) return true;
105    return false;
106}　　
　　html代码：

Code
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5<title></title>
6<link rel="stylesheet" href="style/a.css" type="text/css" media="screen" />
7<script type="text/javascript" src="js/jquery.js"></script>
8<script type="text/javascript" src="js/diray.js"></script>
9<script type="text/javascript">{if $data neq ""}showCalender({$data}, {$year}, {$month});{/if}</script>
10</head>
11<body>
12<div id="borderDivId">
13<div id="pageDivId"><span><a id="prav_link" href="javascript:void(0)" onclick="prev()">&lt;&lt;</a></span><span id="year"></span><span id="month"></span><span><a id="back_link" href="javascript:void(0)" onclick="next()">&gt;&gt;</a></span>
14</div>
15<div id="weekDivId"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
16<div id="dateDiv1"><span id='date1'></span><span id='date2'></span><span id='date3'></span><span id='date4'></span><span id='date5'></span><span id='date6'></span><span id='date7'></span></div>
17<div id="dateDiv2"><span id='date8'></span><span id='date9'></span><span id='date10'></span><span id='date11'></span><span id='date12'></span><span id='date13'></span><span id='date14'></span></div>
18<div id="dateDiv3"><span id='date15'></span><span id='date16'></span><span id='date17'></span><span id='date18'></span><span id='date19'></span><span id='date20'></span><span id='date21'></span></div>
19<div id="dateDiv4"><span id='date22'></span><span id='date23'></span><span id='date24'></span><span id='date25'></span><span id='date26'></span><span id='date27'></span><span id='date28'></span></div>
20<div id="dateDiv5"><span id='date29'></span><span id='date30'></span><span id='date31'></span><span id='date32'></span><span id='date33'></span><span id='date34'></span><span id='date35'></span></div>
21<div id="dateDiv6"><span id='date36'></span><span id='date37'></span><span id='date38'></span><span id='date39'></span><span id='date40'></span><span id='date41'></span><span id='date42'></span></div>
22<input type='hidden' id='year_hidden' name='year_hidden' value="" />
23<input type='hidden' id='month_hidden' name='month_hidden' value="" />
24</div>
25</body>
26</html>