【发布时间】：2019-09-09 05:41:11
【问题描述】：
感谢 Pippin Williamson 的 this seven-year-old tutorial，我刚刚学会了如何使用 ajax 将内容实时加载到管理员端 WordPress 插件页面。
我的插件在后台设置了一个管理页面（工具），包含一个空的 div #cxt-results 和一个带有提交按钮的表单cxt-submit。
感谢以下 PHP 函数和 jQuery，当单击按钮时，将获取给定帖子类型 'viewpoint' 的最新五个 WordPress 帖子，并将其标题返回到 @987654327 @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 进行更“渐进式”的更新——也就是说，按顺序向它添加一个新的帖子标题，直到用尽，而不是全部在一个回复中进程结束。
这对于像获取帖子列表这样快速的过程来说意义不大，就像上面的例子一样。但渐进式反馈对于我想到的未来用例会很有用，其中输出的每个步骤可能需要更长的时间来处理。
我希望看到每个帖子标题一个接一个地回显到 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');
【问题讨论】：
-
在
echo之后使用flush()和ob_flush() -
我已根据您的
ajax更新了我的答案