Wordpress 插件中的 jQuery AJAX 调用不起作用

Question

我已经阅读了这篇文章，Jquery Ajax call in wordpress plugin page not working...

这非常接近我的问题....我有一个非常基本的 Wordpress 插件来提供非常具体的会员表格，它将付款传递给 PayPal 来处理，并且只有电子邮件输入数据。使用相同的按钮单击 PayPal 按钮，还有一个 jQuery 脚本来拾取提交按钮单击并传递相同的数据以生成不同的电子邮件。

在将其移至 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 请求之前缓存对表单变量的引用：

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

});