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 );
         }
       });
    });                    

}）;