从PHP创建JSON数组并通过JQuery发送GET请求

时间:2015-01-16 16:27:32

标签: javascript php jquery html json

我从Google日历活动中提取数据,并希望将其显示在我的HTML标记中。我已经从Google成功提取了数据,并认为我将其传入并以正确的方式编码并编码为JSON。我还能够通过JQuery发出GET请求并通过检查控制台确认它是否已收到。问题是试图在HTML标记中显示它。 但是,经过进一步的调试,似乎我的JSON数组不正确。每当它从Google寻找更多数据时,它几乎就像重复一样。 这是我的代码:

<?php

header('Content-type: application/json');

error_reporting(E_ALL);
ini_set("display_errors", 1);


include('google-api-php-client-master/autoload.php'); 


date_default_timezone_set('America/New_York');

//TELL GOOGLE WHAT WE'RE DOING
$client = new Google_Client();
$client->setApplicationName("My Calendar");
$client->setDeveloperKey('my_api_key');
$cal = new Google_Service_Calendar($client);

$calendarId = 'my_calendar_id';
//TELL GOOGLE HOW WE WANT THE EVENTS
$params = array(
    'singleEvents' => true, //CAN'T USE TIME MIN WITHOUT THIS, IT SAYS TO TREAT RECURRING EVENTS AS SINGLE EVENTS
    'orderBy' => 'startTime',
    'timeMin' => date(DateTime::ATOM),//ONLY PULL EVENTS STARTING TODAY

);
$events = $cal->events->listEvents($calendarId, $params);



$count = 0; 
$items_to_show = 3; 
$data = array();


    foreach ($events->getItems() as $event) 
    { 
        if($count <= $items_to_show) 
        {
            //Convert date to month and day

             $eventDateStr = $event->start->dateTime;
             if(empty($eventDateStr))
             {
                 // it's an all day event
                 $eventDateStr = $event->start->date;
             }

             $temp_timezone = $event->start->timeZone;

             if (!empty($temp_timezone)) 
             {
                $timezone = new DateTimeZone($temp_timezone); //GET THE TIME ZONE
             } 
             else 
             { 
                $timezone = new DateTimeZone("America/New_York"); //Set your default timezone in case your events don't have one
             }

             if ($count >= $items_to_show) 
             {
                break;
             }


             $eventdate = new DateTime($eventDateStr,$timezone);

             $data[$count]['newmonth'] = $eventdate->format("M");
             $data[$count]['newday'] = $eventdate->format("j");
             $data[$count]['newtime'] = $eventdate->format("g:i A");

             echo json_encode($data);


             ++$count; //INCREASE COUNT AND START AGAIN. 

        }
    }
?>

这是我的JSON数组(日历上只有3个事件)但看起来每次查找更多时它都会重复或重置:

[{"newmonth":"Jan","newday":"16","newtime":"3:00 PM"}][{"newmonth":"Jan","newday":"16","newtime":"3:00 PM"},{"newmonth":"Jan","newday":"17","newtime":"2:00 PM"}][{"newmonth":"Jan","newday":"16","newtime":"3:00 PM"},{"newmonth":"Jan","newday":"17","newtime":"2:00 PM"},{"newmonth":"Jan","newday":"18","newtime":"3:00 AM"}]

以下是我想在HTML中自动显示的JQuery:

$(document).ready(function() 
{

    function load() 
    {

        $.ajax
        ({
            type: 'GET',
            url: 'googlesidebar.php',
            // data: {key: 'value'},
            dataType: 'json',
            success: function(data) 
            {
                console.debug(data);
                for (var i = 0; i < data.length; i++) 
                {
                    $('.newmonth').append(data[i].newmonth),
                    $('.newday').append(data[i].newday),
                    $('.newtime').append(data[i].newtime)
                };

                setTimeout(load, 5000);
            },
            error: function(data) 
            {
                //called when there is an error
                console.log(data.message);
            }
        });
    };

    load();
});

HTML标记:

<!DOCTYPE html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>


<body>
<div class="newmonth"></div>
<div class="newday"></div>
<div class="newtime"></div>

<footer>

</footer>



<script src="ajax.js"></script>
<script src="js/main.js"></script>

</body>


</html>

非常感谢任何帮助!

0 个答案:

没有答案