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

http://www.cnblogs.com/zhaoshun/archive/2008/12/26/1363037.html

1.PHP代码

1function 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    }

2.2.JS代码

function 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}

3.HTML代码

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>