在WordPress中使用Ajax更新內容

Question

好吧，我對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($); 
}); 

正如我已經說過了，我今兒這個，如果你能幫助我我可以通過一些自己的方式; ）

Answer 1

// 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文件的路徑。

然後將其放置在文件/js/twitch_file.js以下的javascript：

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)