php - 如何使用 ajax 从 PHP 循环逐步更新 div？

Question

感谢this seven-year-old tutorial从 Pippin Williamson 那里，我刚刚学会了如何使用 ajax 将内容实时加载到管理员端的 WordPress 插件页面。

我的插件在管理后端设置了一个管理页面(工具)，包含一个空的 div #cxt-results 和一个带有提交按钮的表单 cxt-submit.

感谢以下 PHP 函数和 jQuery，当单击按钮时，将获取给定帖子类型 'viewpoint' 的最新五个 WordPress 帖子，以及响应，它们的标题，返回到 cxt-results div，全部在一个列表中。

/* ------------------------------------------------------------------------ *
 * Ajax Function
 * ------------------------------------------------------------------------ */

function cxt_process_ajax() {

    echo '<p>This is my response</p>';

    // If neither of these verifies
    if (!isset($_POST['cxt_nonce']) || !wp_verify_nonce($_POST['cxt_nonce'], 'cxt-nonce') ) {
        die('Permissions check failed');
    }


    $myposts = get_posts(
        array(
            'post_type'         => 'viewpoint',
            'posts_per_page'    => 5
        )
    );

    if ($myposts) {
        echo '<ul>';
        foreach ($myposts as $mypost) {
            echo '<li>' . get_the_title($mypost->ID) . '</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>' . __('No results found', 'cxt') . '</p>';
    }

    die();
}
add_action('wp_ajax_cxt_get_results', 'cxt_process_ajax');

.

jQuery(document).ready(function($) {

  // When the form is submitted
  $('#cxt-form').submit(function() {

    $('#cxt-loading').show();                   // Loading animation
    $('#cxt-submit').attr('disabled', true);    // Submit button
    $('#cxt-results').empty();                  // Content box

    data = {
      action: 'cxt_get_results',
      cxt_nonce: cxt_vars.cxt_nonce
    };

    // Finish up
    $.post(ajaxurl, data, function(response) {   // Post cxt_get_results to wp-admin ajax, get response
      $('#cxt-loading').hide();                  // Loading animation
      $('#cxt-submit').attr('disabled', false);  // Submit button
      $('#cxt-results').html(response);          // Content box
    });

    return false;
  });
});

但是，我想要的是对 cxt-results div 进行更“渐进式”的更新 - 也就是说，依次向其添加新的帖子标题，直到用完为止，而不是在流程结束时进行一次响应。

这对于像上面示例中一样快速获取帖子列表的过程来说意义不大。但是渐进式反馈对于我想到的 future 用例很有用，其中输出的每个步骤可能需要更长的时间来处理。

我希望看到每个帖子标题都一个一个地回显到 div。

我该怎么做呢？我可能认为它涉及 jQuery/Javascript 方面的一种新方法，而不仅仅是 PHP，因为它涉及逐步更新而不是单一响应(？)。

或者有没有办法只用 PHP 来做更多的事情，梳理出一个标准的 foreach？

编辑:更详细的代码...

    /* ------------------------------------------------------------------------ *
     * Menu Item
     * ------------------------------------------------------------------------ */

    add_action( 'admin_menu', 'cxt_add_plugin_admin_menu' );

    function cxt_add_plugin_admin_menu(  ) {
        /*
        add_management_page(                    // Administration Pages addable: https://codex.wordpress.org/Administration_Menus
             'Magic Terms',                     // Page title: The text to be displayed in the title tags of the page when the menu is selected.
             'Magic Terms',                     // Menu text: The text to be used for the menu.
             'manage_options',                  // Capability: The capability required for this menu to be displayed to the user.
             'magic-terms',                     // Menu slug: The slug name to refer to this menu by (should be unique for this menu).
             'cxt_plugin_page'                  // Callback function: The function to be called to output the content for this page
         );
         */

         // Per https://www.youtube.com/watch?v=7pO-FYVZv94
         global $cxt_settings;
         $cxt_settings = add_management_page(
             __('Magic Terms Demo', 'cxt'),
              __('Magic Terms', 'cxt'),
              'manage_options',
              'magic-terms',
              'cxt_plugin_page'
          );

    } // end cxt_add_plugin_admin_menu




    /* ------------------------------------------------------------------------ *
     * Page Callback
     * ------------------------------------------------------------------------ */

    /**
     * Renders the basic display of the menu page for the theme.
     */
    function cxt_plugin_page(  ) {

            ?>

            <div class="wrap">

                    <h1>Magic Terms Plugin</h1>

                    <p>This is the plugin page, cxt_plugin_page. Stuff goes here.</p>

                    <?php
                    // settings_fields( 'pluginPage' );
                    // do_settings_sections( 'pluginPage' );
                    // submit_button();
                    ?>

                    <!-- https://stackoverflow.com/a/32340299/1375163 -->

                    <!--
                    <form method="POST" action="<?php echo admin_url( 'admin.php' ); ?>">
                        <input type="hidden" name="action" value="magic-terms" />
                        <input type="submit" value="Do it!" class="button button-primary" />
                    </form>
                    -->

                    <!-- https://www.youtube.com/watch?v=7pO-FYVZv94 -->
                    <form id="cxt-form" action="" method="POST">
                        <div>
                            <input type="submit" name="cxt-submit" id="cxt-submit" value="Get Results" class="button button-primary" />
                            <img src="/wp-admin/images/wpspin_light.gif" class="waiting" id="cxt-loading" style="display:none">
                        </div>
                    </form>


                    <div id="cxt-results">
                    </div>


            </div>

            <?php

    }



    /* ------------------------------------------------------------------------ *
     * Ajax Enqueue
     * ------------------------------------------------------------------------ */
    // Per https://www.youtube.com/watch?v=7pO-FYVZv94
    function cxt_load_scripts($hook) {

        // Use settings above to know when we are on this settings page
        global $cxt_settings;

        if ( $hook != $cxt_settings )
            return;

        wp_enqueue_script( 'cxt-ajax', plugin_dir_url(__FILE__).'js/cxt-ajax.js', array('jquery') );
        wp_localize_Script('cxt-ajax', 'cxt_vars', array(
            'cxt_nonce'     => wp_create_nonce('cxt-nonce')
        ));

    }
    add_action('admin_enqueue_scripts', 'cxt_load_scripts');




    /* ------------------------------------------------------------------------ *
     * Ajax Function
     * ------------------------------------------------------------------------ */

    function cxt_process_ajax() {

        echo '<p>This is my response</p>';

        // If neither of these verifies
        if (!isset($_POST['cxt_nonce']) || !wp_verify_nonce($_POST['cxt_nonce'], 'cxt-nonce') ) {
            die('Permissions check failed');
        }


        $myposts = get_posts(
            array(
                'post_type'         => 'viewpoint',
                'posts_per_page'    => 5
            )
        );

        if ($myposts) {
            echo '<ul>';
            foreach ($myposts as $mypost) {
                echo '<li>' . get_the_title($mypost->ID) . '</li>';
                ob_flush();
                flush();
                sleep(2);
            }
            echo '</ul>';
        } else {
            echo '<p>' . __('No results found', 'cxt') . '</p>';
        }


        die();
    }
    add_action('wp_ajax_cxt_get_results', 'cxt_process_ajax');

Answer 1

这是一个示例，您可以在其中执行您要求的事情。

解释

在 index.html 文件中，我进行了 ajax 调用并为下载进度事件设置了一个监听器。在那个进度事件中，我们能够获得进度输出，我们可以将其设置为任何 html。

在 ajax.php 文件中，我回显了字符串以及 sleep() 和 ob_flush() 以及 flush()。所以 sleep 会减慢执行过程并且 flush 立即输出而不将其存储到缓冲区中。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Continuos Output Example</title>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="content">
</div>
<script type="text/javascript">
    $.ajax({
        url:"ajax.php",
        method:"GET",
        success:function(data,status,xhr)
        {
            $(".content").html(data);
        },
        xhr: function(){
            var xhr = $.ajaxSettings.xhr() ;

            xhr.onprogress = function(evt){ 
                $(".content").html(evt.currentTarget.responseText);
            };

            return xhr ;
        }
    });
</script>
</body>
</html>

ajax.php

<?php

echo "hi";
ob_flush();
flush();

for ($i=0; $i < 10; $i++) {
    echo "hi".$i;
    ob_flush();
    flush();
    sleep(2);
}

你的ajax应该是这样的

$.ajax({
    url:ajaxurl,
    data:data,
    success:function(response)
    {
        //anything you want to do after end of excecution
    },
    xhr: function(){
        var xhr = $.ajaxSettings.xhr() ;
        xhr.onprogress = function(evt){ 
            $('#cxt-loading').hide();                  // Loading animation
            $('#cxt-submit').attr('disabled', false);  // Submit button
            $('#cxt-results').html(evt.currentTarget.responseText);
        };
        return xhr ;
    }
});