时间戳

首页 > 解决方案 > 在 AJAX 调用中循环 PHP 时保持实时日志

javascript - 在 AJAX 调用中循环 PHP 时保持实时日志

问题描述

我正在创建一个 Wordpress 插件来调用 API 并为响应中返回的每个对象创建新的 Wordpress 帖子。这是我的函数的 PHP，它遍历 API 响应以创建新的 Wordpress 帖子：

add_action('wp_ajax_sync_posts', 'sync_posts_from_api' );
function sync_posts_from_api() {
    // MAKING API CALL HERE
    
    foreach ($data as $post) {
        $new_post = array(
            'post_type'     => 'post',
            'post_title'    => $post->title,
            'post_status'   => 'publish',
            'post_author'   => 1,
            'post_content'  => $post->description,
        );
        $wp_post = wp_insert_post($new_post);

        echo '<pre>Post ID ' . $wp_post->ID . ') has been created.</pre>';
    }
}

然后我有这样的Javascript：

jQuery(function($) {
    $('form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: { 
                action: 'sync_posts'
            },
        }).done(function(response) {
            $('.log').html(response);
        });
    });
});

这在 AJAX 调用完全完成后有效，但我希望能够在容器运行时将每个附加echo到.log容器中，而不是在调用完成时一次全部附加到容器中。我将如何进行这种改变？

标签： javascriptphpwordpress

解决方案

您只能在请求完成后访问 ajax 请求响应。完成您想要的正确方法是使用web sockets。

在过去，我们使用这样的方式创建 iframe 加载：

foreach ($data as $post) {

    echo "
        <script>
            window.parent.postMessage({message: '".$post."'}, 'http://localhost/');
        </script>
    ";

    flush();
}

浏览器在加载页面时实时执行js，js向父框架发送消息。您还需要父框架上的正确 js 代码来接收和处理这些帖子。尽管这可能仍然有效，但它非常粗略，不推荐。

推荐阅读