WordPress 使用 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>

使用 Javascript

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 透過傳送 HTTP 訊息到/wp-admin/admin-ajax.php(預設情況下)，然後觸發相應的掛鉤。所以，你附加一些 jQuery 到一個事件觸發你的刪除按鈕，然後釋出到 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(通常) 函式。回撥函式是一個 javascript 函式，當 ajax 成功完成時觸發。

一步步：

步驟 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();
}

參考文獻

Using jQuery to delete data stored in wp_options

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 使用 jQuery 刪除儲存在 wp_options 中的資料