WordPress插件中的jQuery AJAX調用不起作用

Question

我已經閱讀了這篇文章， wordpress插件頁面中的Jquery Ajax調用不起作用

這非常接近我的問題。...我有一個非常基本的Wordpress插件，可以提供非常具體的會員資格表格，它將付款傳遞給PayPal進行處理，並且僅通過電子郵件發送輸入的數據。 使用PayPal按鈕的相同按鈕單擊，還存在一個jQuery腳本來拾取Submit按鈕的單擊並傳遞相同的數據以生成不同的電子郵件。

在將其移至Wordpress之前，這一切正常，現在在Wordpress插件下，除了單擊提交按鈕時的AJAX功能外，其他一切都正常。 提交付款表格后，將使用jQuery腳本來點擊“提交”按鈕，然后通過AJAX發送付款表格數據。

這是js文件...當我檢查頁面源代碼時，我看到正確的Wordpress標頭行包括js腳本並選擇源代碼中的鏈接，我得到了正確的js文件。 取消注釋時，也會彈出警報（“幫助”）。

jQuery(document).ready(function(){
  jQuery('#paypal').submit(function(){
       //alert("help");
       jQuery.ajax({
         url : ajax_object.ajaxurl,
         type: 'POST',
         action: 'memreg_process_request',
         //Is this the correct way to pass form data under Wordpress.
         data: $(this).serialize(),
         success: function( data ){
           //Do something with the result from server
           console.log( data );
         }
       });
  });                      
});

這是Wordpress中myplugin中的代碼.....

function myplugin_register_script() 
{
  // Register the style 
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', false) ;
  wp_register_script('memreg_process', plugins_url( '/js/memreg.js',__FILE__), false, '1.0.0', false) ;
  // enqueing:
  wp_enqueue_script('jquery');
  wp_enqueue_script('memreg_process');
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

function myplugin_styles()  
{ 
  // Register the style
  wp_register_style( 'memreg_style', plugins_url('style.css', __FILE__),false, '1.0.0', false );
  // enqueing:
  wp_enqueue_style( 'memreg_style' );
}
add_action('wp_enqueue_scripts', 'myplugin_register_script');
add_action('wp_enqueue_scripts', 'myplugin_styles');

add_action( 'wp_ajax_memreg_process_request', 'memreg_process_request_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_memreg_process_request', 'memreg_process_request_wp_ajax_function' );

function memreg_process_request_wp_ajax_function(){
   $email_to = "oet@pacssi.com";
   $email_subject = "Testing Email Function from PHP script";
   $email_message .= "This is a test message to test AJAX result\n"; 
   $email_message .='Address:'.$_POST["Street"].', '.$_POST["City"].', '.$_POST["State"].' '.$_POST["Zip"]."\r\n";
   $email_message .='Phone:'.$_POST["Phone"].'Email:'.$_POST["Email"]."\r\n";
   $email_message .='Chapter:'.$_POST["Chapter"]."\r\n";   
   $headers = 'From: '.$email_from."\r\n".
   'Reply-To: '.$email_from."\r\n" .
   'X-Mailer: PHP/' . phpversion();
   @mail($email_to, $email_subject, $email_message, $headers);  

  //To send back a response you have to echo the result!
  //echo $_POST['Email'];
  //echo $_POST['Chapter'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

function myform(){
........
}

同樣，在將成員資格表移至Wordpress插件之前，我已經完成了所有AJAX部分的工作。 在Wordpress之前，AJAX只是將表單數據發送到Web服務器上的一個單獨的process.php文件中，以提取一些字段並生成電子郵件。 閱讀上面列出的帖子以及許多其他文章，我無法讓AJAX部分在Wordpress下工作。

Answer 1

我看到您有action: 'memreg_process_request' ，但是action未被識別為屬性，並且不會再傳遞$_POST['action'] = 'memreg_process_request' 。 此外，變量$(this)引用ajax請求； 因此，在構建ajax請求之前，您需要緩存對form變量的引用：

var $this = $(this);

$.ajax({....

然后，在我們的data構造函數中，我們需要定義操作和表單。

實際上，它的結構應類似於：

data: {
    action: 'memreg_process_request',
    form: $this.serialize()
}

當然，您的表格數據現在可以在$_POST['form']

由於您已經注冊了add_action ，並且擁有一個處理請求/響應的函數，因此僅此而已。

Answer 2

這是我所做的所有更改。

我必須更改data：和url：行才能使其正常工作。 由於某種原因，我無法獲得wp_localize_script來定義ajax_object.ajaxurl，我一直使對象未定義，所以我只使用了完整路徑。 我使用Firebug查看jQuery腳本生成的錯誤。 嘗試以上方法后，以上建議在Firebug中產生了錯誤。 我搜索了許多其他帖子以找到解決方案。

我使用“ parce_str（$ _ POST [form]，$ my_POST）”在函數memreg_process_request_wp_ajax_function（）中提取了傳遞的數據。

jQuery(document).ready(function(){
jQuery('#paypal').submit(function(){
       jQuery.ajax({
         url : "/wp-admin/admin-ajax.php",
         type: 'POST',
         data: {
            action: 'memreg_process_request',
            form: jQuery('#paypal').serialize()
         },
         success: function( data ){
           //Do something with the result from server
           console.log( data );
         }
       });
    });                    

}）;