WordPress的：傳遞數據到頁面使用Ajax

Question

我想從ajax調用數據傳遞到Wordpress的特定頁面。
下面是我使用的代碼：

jQuery.ajax({type: "POST", 
      url: 'single-member-page.php', 
      data:{ size: 'item' }, 
      success: function(){ 
       //alert(data); 
       jQuery('#display-member-size').text(data); 
      } 
     }); 

的腳本不爲WP工作。我還考察使用控制檯頁面，我得到一個錯誤：

single-member-page.php" NOT FOUND

我新的WP，我不知道如何從一個Ajax調用數據傳遞到指定的頁面。

Answer 1

請參閱本https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

基本上你創建了一個wp_ajax_myaction動作，這個你可以在你的functions.php或地方，你認爲適合定義。然後按照頁面上的示例（用法部分）所示進行調用。

編輯： 添加一些代碼，以幫助您瞭解

在你functions.php

add_action('wp_ajax_my_ajax', 'my_ajax'); 
add_action('wp_ajax_nopriv_my_ajax', 'my_ajax'); 

function my_ajax() { 
    die("Hello World"); 
} 

在您的JS：

$.ajax({ 
     url: "http://yoursite.com/wp-admin/admin-ajax.php", 
     data : {action : 'my_ajax'}, 
     success: function(data) { 
      alert('The code says ' + data); 
     } 
    }) 

有關代碼幾件事情：

1. 這只是一個快速而骯髒的代碼，大部分都是從示例中剔除，以向您展示它如何工作。

2. 的no_priv動作用於允許未經授權的訪問（即非管理員用戶以及）

3. 的url通常不會在示例中所示的方式硬編碼的，人們通常把它傳遞給腳本使用admin_url('admin-ajax.php')

4. 在數據中發送的action確定應該調用哪個函數。 （my_ajax在我們的情況下）

讓我們知道你是否仍然有問題。

Answer 2

只是簡單的說：所有的ajax文章都應該發送到admin-ajax.php每個請求需要提供至少一個叫做action的數據。基於這個動作，admin-ajax.php中的代碼創建兩個鉤子。 如果action的值爲cusom_action，則會自動創建wp_ajax_custom_action和wp_ajax_nopriv_custom_ction。檢查WordPress coddex。 https://codex.wordpress.org/AJAX_in_Plugins

Answer 3

@Daniel

你問了一個非常好的問題，着手解決方案之前，我們需要了解的WordPress AJAX的拇指規則。

拇指規則：

1. 據WordPress的標準的所有Ajax請求應該來 「ajaxurl」 在JavaScript。它實際上包含「wp-admin/admin-ajax.php」文件路徑。

   例子：

   $.ajax({ 
       url: ajaxurl, 
       data: {'action':'generateCptApiKey'}, 
       success:function(data) { 
        console.log(data); 
       }, 
       error: function(errorThrown){ 
        console.log(errorThrown); 
       } 
   }); 
   

如果你正在做一些某些材料在可溼性粉劑管理員儀表盤部分或創造可溼性粉劑管理員控制檯選項頁有關可溼性粉劑管理員節狀區域，比「ajaxurl」全局變量將在JavaScript中始終可用。

如果Ajax請求的情況下，從前端頁面初始化/後比你使用以下方法更好，如果你這個本地化的前端JavaScript來指定管理-ajax.php文件路徑，所以它將在JavaScript變量中可用，就像它在wp-admin儀表板部分中提供的一樣。

爲了達到這個目的，我們需要添加幾行代碼。

方法：

更新了例代碼前端的AJAX調用：

// Register the script 
wp_register_script('ajaxsettings', 'path/to/ajaxsettings.js'); 

// Localize the script with new data 
$ajaxsettings = array(
    'ajaxurl' => admin_url('admin-ajax.php') 
); 
wp_localize_script('ajaxsettings', 'ajaxsettings', $ajaxsettings); 

// Enqueued script with localized data. 
wp_enqueue_script('ajaxsettings'); 

$.ajax({ 
     url: ajaxsettings.ajaxurl, 
     data: {'action':'generateCptApiKey'}, 
     success:function(data) { 
      console.log(data); 
     }, 
     error: function(errorThrown){ 
      console.log(errorThrown); 
     } 
    }); 

此我們需要編寫方法來處理這種AJAX請求和發送輸出回AJAX調用後。

對於在wordpress中檢測ajax請求調用，他們有兩個標準的鉤子，鉤子只是事件就像我發送ajax請求，wordpress ajax相關鉤子將觸發，我可以調用該觸發器上的任何功能。

所以基本上用於處理Ajax請求下面是兩個掛鉤：

1. wp_ajax_(action)：它處理的請求認證/登錄的用戶。 （用於後端wp-admin儀表板相關任務）
2. wp_ajax_nopriv_(action)：它處理前端未經身份驗證的請求。 （用於前端頁/後Ajax調用相關的任務）

這裏（動作）是你必須在當前主題function.php文件到代碼的方法的名稱，這個方法將處理這個ajax請求。

例子：

面向對象的風格：

add_action('wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles')); 
add_action('wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles')); 

注：這裏 「cleanResponseFiles」 是類，將處理Ajax請求的方法。和$這是指向當前類對象。

程序風格：

add_action('wp_ajax_cleanResponseFiles', 'cleanResponseFiles'); 
add_action('wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles'); 

注：這裏 「cleanResponseFiles」 被添加在當前主題function.php文件的功能，它會處理Ajax請求。

在此我們正在考慮可以從wp-admin儀表板或從前端頁面/帖子創建ajax請求。

例AJAX請求處理程序方法：

function cleanResponseFiles(){ 
    echo "<pre>"; 
    print_r($_POST); 
    echo "</pre>"; 

    //Always use exit() in ajax request handler function end 
    exit(); 
} 

拇指規則：

1. 始終使用出口在AJAX請求處理程序（）的方法的方法，它是必不可少的。
2. 發送ajax請求的最佳做法是使用Wordpress_nonce。

它只是在請求處理方法，通過增加Honeypot，用生成的隨機密鑰一個隱藏的輸入字段，並在avoding CRSF（跨站請求僞造），就應該進行驗證。

這些是我們可以用來創建Wordepress隨機數和驗證Wordpress隨機數和ajax請求處理程序或簡單http請求處理程序的方法。

WordPress的隨機數的方法：

1. wp_create_nonce：用於創建一個隱藏字段中的形式發送隨機密鑰。
2. wp_verify_nonce：用於驗證請求處理程序方法中的隨機密鑰。

我會在此評論中附上一個wordpress ajax調用的實用示例。