如何使用AJAX在Wordpress上正确刷新数据 - How do I properly refresh data on Wordpress using AJAX

我正在尝试用Wordpress刷新仪表板上的一个小部件。

我的插件是用PHP编写的，但我正在尝试添加Jquery/AAJAX，以便在进行一些更改时刷新每个小部件。

PHP中的函数将下载并存储文件，然后将信息显示到小部件中。

我遇到的问题是：文件已成功下载并存储。但新的信息并没有显示出来。它保持不变。我相信这可能很简单，但我已经尝试了一段时间，但没有成功。

这是我的代码示例：

<?php
add_action( 'admin_footer', 'my_action_javascript' ); // Write our JS below here

function my_action_javascript() { ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    var data = {
        'action': 'refresh_function',
    };

            setInterval(function() {
    $.get(ajaxurl, data, function (result) {
    });
            },20000);
});
</script> <?php
}
add_action('wp_ajax_refresh_function', 'display_function');

PHP函数：

function display_function()
{

$conn_id = ftp_connect($ftp_server);
$login_result = ftp_login($conn_id, $ftp_user_name, $ftp_user_pass);
if (ftp_get($conn_id, $local_file, $server_file, FTP_BINARY)) {

ftp_close($conn_id);
$path = __DIR__."/XML/File.xml";  
$channel = simplexml_load_file($path);   

echo "<div style='overflow:auto; height:400px;'>";

    foreach ($channel->channel->item as $item)  
    {            
        echo "<div class='xppArticle'>";
        echo "<h2>" . $item->title . "</h2>";                
        echo "<p>". set_paragraph_length_display($item->description, 250) . "(...)" . "</p>";

            global $wpdb;  
            $query = $wpdb->prepare('SELECT ID FROM ' . $wpdb->posts . ' WHERE post_title = %s', $item->title); 
            $cID = $wpdb->get_var($query);   
            echo "<hr />";
        echo "</div>";
    }
echo "</div>";    
}

我的理解是，我的AJAX会调用这个函数，它会正常工作。我想我错了，因为一旦我使用AJAX下载了一个新文件，屏幕上就不会显示任何新内容。

谢谢！

您的ajax回调函数为空。选择要将ajax输出放入其中的元素，然后将其innerhtml设置为该代码。

$.get(ajaxurl, data, function (result) {
    $( '#my-dashboard-widget-content-element' ).html( result );
});

确保你有合适的动作集，就像另一个答案一样：

add_action('wp_ajax_refresh_function', 'display_function' );
add_action('wp_ajax_nopriv_refresh_function', 'display_function' );

此外，您应该使用nonce来验证它是一个授权的ajax请求。在php函数的末尾，不要忘记die（）；

如需全面概述，请查看http://codex.wordpress.org/AJAX_in_Plugins

好的，首先，远程设置脚本。这是我做的一个演示：

function ajaxurl(){
    wp_enqueue_script('product-selector', get_template_directory_uri().'/js/ajax.js', array('jquery')); // Remotely place script in /js/ folder in my theme.
    wp_localize_script('product-selector', 'MyAjax', array(
        // URL to wp-admin/admin-ajax.php to process the request
        'ajaxurl' => admin_url('admin-ajax.php'),
        )
    );
}
add_action('wp_head', 'ajaxurl');

下一步，你需要确保你排队没有特权以及管理员：

add_action('wp_ajax_nopriv_ajax_callback', 'ajax_callback');
add_action('wp_ajax_ajax_callback', 'ajax_callback');

在我的脚本中，"ajax_callback"是我运行的php函数。因此，您需要进行相应的调整。

此外，在您的js中，您需要使ajaxUrl看起来像：

MyAjax.ajaxurl

如果您直接使用我的代码而不进行调整。

WordPress上的AJAX有点难上手，但一旦你开始使用，它就有意义了。使用开发人员工具，切换到Chrome上的"控制台"选项进行调试，看看你得到了什么信息（如果有的话）。