通过ajax调用php生成json转给js,生成html
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 }
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 = 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 == 7? maxDaysOfMonth : maxDaysOfMonth + 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['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()"><<</a></span><span id="year"></span><span id="month"></span><span><a id="back_link" href="javascript:void(0)" onclick="next()">>></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>
页:
[1]