在WordPress中使用Ajax更新内容

时间:2015-04-02 01:45:56

标签: php ajax wordpress

好的伙计们,当谈到wordpress中的ajax时,我没有希望,所以希望你能帮助我。我正在尝试从抽搐中检索数据,然后每5秒更新一次。我要展示的代码确实有效,而不是在wordpress上,因为它们以不同的方式处理ajax。这是我的PHP代码 -

<?php

    // setting the options
    $twitch_username = 'ChinchillaDave';
    $twitch_username = strtolower($twitch_username);

    // fetching the twitch stream data | $twitch_stream
    $tsh = curl_init(); // twitch stream handler
    $tsh_url = "https://api.twitch.tv/kraken/streams/$twitch_username";
    curl_setopt($tsh, CURLOPT_HEADER, false);
    curl_setopt($tsh, CURLOPT_URL, $tsh_url);
    curl_setopt($tsh, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($tsh, CURLOPT_SSL_VERIFYPEER, false);
    $tsh_exec = curl_exec($tsh);
    curl_close($tsh);
    $twitch_stream = json_decode($tsh_exec, true);
?>
<?php if($twitch_stream['stream'] !== null) : ?>
    <span class="alignleft">
        <h3><?php echo $twitch_stream['stream']['game'] ?></h3>
        <p><?php echo $twitch_stream['stream']['channel']['status'] ?></p> 
    </span>
    <span class="alignright">
        <?php
            $time = strtotime($twitch_stream['stream']['created_at']);
            function stream_started ($time) {
                $time = time() - $time;
                $tokens = array (
                    31536000 => 'year',
                    2592000 => 'month',
                    604800 => 'week',
                    86400 => 'day',
                    3600 => 'hour',
                    60 => 'min',
                    1 => 'sec'
                );
                foreach ($tokens as $unit => $text) {
                    if ($time < $unit) continue;
                    $numberOfUnits = floor($time / $unit);
                    return $numberOfUnits.' '.$text.(($numberOfUnits>1)?'s':'');
                }
            }
        ?>
        <span class="glyphicon glyphicon-time" aria-hidden="true" style="color: #4DC47D;"></span><?php echo '<span class="hidden-xs hidden-sm">Stream Started </span>' . stream_started($time) . ' ago'; ?>
        <span class="glyphicon glyphicon-play-circle" aria-hidden="true" style="color: #1a7eda;"></span><?php echo number_format($twitch_stream['stream']['average_fps']); ?><span class="hidden-xs hidden-sm"> fps</span>
        <span class="glyphicon glyphicon-eye-open" aria-hidden="true" style="color: #cd201f;"></span><?php echo number_format($twitch_stream['stream']['viewers']); ?><span class="hidden-xs hidden-sm"> Viewer(s)</span>
    </span>
<?php else : ?>
    <span class="alignright">
        Currently offline, please check back soon.
    </span>
<?php endif; ?>

和我的ajax代码 -

function twitchStreamData($) {
    "use strict";
    $('.twitch-stream-header').load('../wp-content/themes/creativenetwork/includes/twitch-stream-data.php'); // loads the php script that grabs the users details from Twitch
    var updateInterval = setInterval(function () {
        $('.twitch-stream-header').load('../wp-content/themes/creativenetwork/includes/twitch-stream-data.php'); // inserts the data into the DOM element {.twitch-stream-header}
    }, 5 * 1000); // updates the php script every 5 seconds and sends it back to the DOM element
}

jQuery(document).ready(function ($) {
    'use strict';
    twitchStreamData($);
});

正如我所说,我对此毫无希望,如果你能帮助我,我可以通过你的方式;)

1 个答案:

答案 0 :(得分:0)

// Make sure to use wp_ajax_nopriv because you need to call the ajax function from the front-end
add_action( 'wp_ajax_nopriv_retrieve_twitch_data', 'retrieve_twitch_data_callback' );
add_action( 'wp_enqueue_scripts', 'print_twitch_scripts' );

function retrieve_twitch_data_callback() {
    // The ajax request will arrive here
    // You can now retrieve and print the twitch data
}

function print_twitch_scripts() {
    wp_enqueue_script('twitch-script', plugins_url('/js/twitch_file.js', __FILE__));

    // Print a javascript object on the client called 'ajax_object' with an attribute 'ajax_url'
    //  which contains the URL to the ajax file you need to send a request to
    wp_localize_script('twitch-script', 'ajax_object', 
        array('ajax_url' => admin_url('admin-ajax.php')));
}

请注意,上面的代码是为Wordpress插件编写的,因此您可能需要调整javascript文件的路径。

然后将以下javascript放在文件/js/twitch_file.js中:

function twitchStreamData($) {
"use strict";
    $('.twitch-stream-header').load(ajax_object.ajax_url, {action: 'retrieve_twitch_data'});
    var updateInterval = setInterval(function () {
        $('.twitch-stream-header').load(ajax_object.ajax_url, {action: 'retrieve_twitch_data'});
    }, 5 * 1000);
}

jQuery(document).ready(function ($) {
    'use strict';
    twitchStreamData($);
});

此处解释了如何运作:wp_ajax_(action)