如何从插件执行最简单的前端AJAX调用?

时间:2020-02-21 作者:pg.

我试图让这件事尽可能简单,只是为了了解基本情况,但我一直收到来自管理ajax的400个错误和0个响应。php。我只想用一些数据打ajax。这是我的js:

jQuery(document).ready(function($) {
  $(\'body\').click(function(e){
      $.ajax({
          action: \'the_ajax_hook\',
          data: \'field=data\',
          type: \'post\',
          url: the_ajax_script.ajaxurl,
          success: function(response_from_the_action_function) {
              $("#site-content").html(response_from_the_action_function);
          }
      });
  });
});
这是我的插件:

function load_my_scripts(){
     wp_enqueue_script( \'my-ajax-handle\', plugin_dir_url( __FILE__ ) . \'ajax.js\', array( \'jquery\' ) );
     wp_localize_script( \'my-ajax-handle\', \'the_ajax_script\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
}

add_action( \'wp_enqueue_scripts\', \'load_my_scripts\' );
add_action( \'wp_ajax_the_ajax_hook\', \'the_action_function\' );
add_action( \'wp_ajax_nopriv_the_ajax_hook\', \'the_action_function\' ); 

function the_action_function(){
  echo "field is " . $_POST[\'field\'];
  die();
}
本地化似乎很有效,因为它找到了admin\\u ajax的正确URL,但这是一个错误的请求,没有返回任何内容。

我知道我遗漏了一些明显的错误,但这就是明显错误的所在,除非有人告诉你,否则这些错误似乎并不明显。我错过了什么?

2 个回复
最合适的回答,由SO网友:Andrea Somovigo 整理而成

抄本:wp_ajax_{$action} 和wp\\u ajax\\u nopriv{$action}dinamic部分{$action}必须与函数名称相同,因此:

add_action( \'wp_ajax_the_ajax_hook\', \'the_action_function\' );
add_action( \'wp_ajax_nopriv_the_ajax_hook\', \'the_action_function\' );
执行:

add_action( \'wp_ajax_the_action_function\', \'the_action_function\' );
add_action( \'wp_ajax_nopriv_the_action_function\', \'the_action_function\' );

SO网友:Chetan Vaghela

您应该将数据传递为data: {action: \'actionname\', filed: data},. 因此,您的数据是包含数据的变量。因此,您的代码如下所示:

jQuery(document).ready(function($) {
  $(\'body\').click(function(e){
      $.ajax({
          data: {
              action: \'the_ajax_hook\',
              field: data,
            },
          type: \'post\',
          url: ajax_object.ajaxurl,
          success: function(response_from_the_action_function) {
              $("#site-content").html(response_from_the_action_function);
          }
      });
  });
});

相关推荐

AJAX响应条带多维数组,无法解码

我正在使用wp_ajax_ 和wp_ajax_nopriv_ 在本地化脚本中,我传递了一个大的多维数组(它很大!)。它不需要任何JSON编码、解码。但我想在我调用ajax时对其进行编码。。。所以我用json_encode 在本地化脚本中(wp\\u json\\u encode也提供相同的输出)。。我通过ajax数据参数传递它。现在当我以json_decode($_POST[\'largejson\'], true)我得到的响应不是数组,而是带有大量反斜杠的字符串\\\":[{\\\"field_type