在AJAX调用中遍历PHP时保留实时日志

Question

我正在创建一个Wordpress插件来调用API，并为响应中返回的每个对象创建新的Wordpress帖子。下面是PHP for my函数，它遍历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容器，而不是在调用完成时立即添加所有all。我该如何做出改变呢？

Answer 1

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

在过去，我们使用如下代码创建一个iframe加载：

foreach ($data as $post) {

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

    flush();
}

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