使用jQuery删除wp_options中存储的数据

我想知道是否有人可以进一步建议我解决我的问题。我的插件的一部分存储日志文件用于调试目的。我已经使用jquery和wp_localise_script在管理页面的（div＃log）中成功显示了它们。我有一个删除这些日志的按钮，但不确定如何处理。我觉得ajax在这里可能会派上用场，但不确定从哪里开始。

这是我的代码的相关部分：

admin_enqueue_scripts（操作）

 $args = array(get_option('wow_tweets_log'));//log files fetched from wp_options table    
    wp_enqueue_script('wow_tweet');//registered earlier on with jQuery dependency
    wp_localize_script('wow_tweet', 'wow_vars', $args);

管理员页面

<tr><th scope="row"><strong>Debugging</strong></th><td>
    <div id="debug" class="button-primary">Debug</div><!--debug button shows logs-->
    <div id="hide_debug" class="button-secondary">Hide</div><!--debug button hides logs-->
    <div id="clear_log" class="button-secondary">Empty Log</div><!--Press to delete logs-->
</td></tr>
<tr><th scope="row"></th><td><div id="log"><!--Logs show here--></div></td></tr>

Java脚本

jQuery(document).ready(function() { 

    var debug_show = jQuery('#log').hide();//hides log by default

    jQuery('#debug').click(function(){//on click shows logs files in div#log
        for (var i = 0, l = wow_vars.length; i < l; i++) {
            var data = wow_vars[i];
        }
        jQuery('#log').show().html(data);

    });
    jQuery('#hide_debug').click(function()
    {
        debug_show.hide();
    }); 
});

清除日志的操作

 function clear_log(){
    delete_option('wow_tweets_log');//am stuck on how to invoke this

    /*die();  would go at the end if ajax used*/
 }
 add_action('clear_log','clear_log');

到目前为止，该脚本可以显示所有日志文件，现在我需要的是单击#clear_log时将其删除。我知道在页面加载后在init上插入do_action会立即将其删除，这使我的JavaScript无法使用，因此我猜唯一的选择就是ajax！我是否需要向wp_localize_script（）添加另一个引用？任何帮助，将不胜感激。

WordPress中的Ajax通过向/wp-admin/admin-ajax.php发送HTTP帖子（默认情况下）来工作，然后触发相应的钩子。因此，您将一些jquery附加到由您的Delete按钮触发的事件，然后将该事件发布到admin-ajax.php，后者具有一个动作，例如delete_my_options（），该动作实际上运行php进行删除。然后，您有一个称为回调的函数，该函数在成功完成ajax请求后运行。例如，您可以使用它来淡化#log div。

简而言之，您需要执行三个步骤，即操作，ajax和回调。该操作由DOM事件触发，并附加到两个钩子wp_ajax_ {action_name}和wp_ajax_nopriv_ {action_name}（仅当您希望没有登录用户能够执行此操作时）。当该操作被发布到wp-admin / admin-ajax.php时，这些将触发。Ajax是挂钩到它们的php（通常）函数。回调函数是当ajax成功完成时触发的javascript函数。

一步步：

第1步，在您的js文件中

jQuery('#hide_debug').click(function()
{
    var data = {};
    data.action = 'clear_log_action';
    data.options_delete_nonce = ajax_object.options_delete_nonce;
    jQuery.post(ajax_object.ajax_url, data, clear_log_callback);

}); 

第2步，在您的functions.php或插件中

将此添加到您从中加入JavaScript的函数中：（感谢@Milo）

wp_localize_script( 'my_js_file_name', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ,   'options_delete_nonce' => wp_create_nonce( 'options_delete_nonce' ), ) );

然后将其添加到您的functions.php或插件中：

// Edit: removed the nopriv hook (Thanks @toscho)
add_action('wp_ajax_clear_log_action','clear_log_ajax'); // attach your data.action to wp_ajax and wp_ajax_nopriv and hook your php function
function clear_log_ajax() {
    $nonce = $_POST['options_delete_nonce'];
    // Edit: Added nonces and permissions check (Thanks @Otto)
    if( wp_verify_nonce( $nonce, 'options_delete_nonce' ) && current_user_can( 'manage_options' ) ) {
        delete_option('wow_tweets_log');
        die(); // make sure to put a die() or exit() at the end of your ajax
    }
}

步骤3，返回您的js文件

// output will be what is echoed from your ajax, if anything
function clear_log_callback(output) 
{
    jQuery('#log').hide();
}