如何在wordpress中调用ajax

Question

我的ajax调用输出始终显示为0,因为输出不知道原因

在functions.php我有此代码

function get_data() {
    $abc = '1';
    $result = $wpdb->get_results("SELECT * FROM ".$wpdb->options ." WHERE option_name LIKE '_transient_%'");
    echo  $result; //returning this value but still shows 0
    wp_die();
}

add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

而我的ajax调用是在javascript中

$('body').on("click", ".re-reset-btn", function(e){

    var panel = $('#re-compare-bar');       

    $.ajax({
             type : "GET",
             dataType : "json",
             url : "/wp-admin/admin-ajax.php",
             data : {action: "get_data"},
             success: function(response) {

                   alert("Your vote could not be added");
                   alert(response);
                }
        });   

    $("#re-compare-bar-tabs div").remove(); 
    $('.re-compare-icon-toggle .re-compare-notice').text(0); 

});

我正在使用wordpress进行ajax调用而不使用插件但是没有得到我正在传递的内容.即使我输出$ abc仍然显示0.

Answer 1

实际上，WordPress 带有一个方便的功能来访问 admin-ajax。

要求

• 在wp-admin 中你不需要做任何事情，js 库总是被加载

• 在前端，您需要将脚本入队wp-util，如下所示：

  add_action( 'wp_enqueue_scripts', 'my_enqueue_function' );
  
  function my_enqueue_function() { 
      // Option 1: Manually enqueue the wp-util library.
      wp_enqueue_script( 'wp-util' );
  
      // Option 2: Make wp-util a dependency of your script (usually better).
      wp_enqueue_script( 'my-script', 'my-script.js', [ 'wp-util' ] );
  }
  

JS 库

wp-util 脚本包含wp.ajax可用于发出 ajax 请求的对象：

 wp.ajax.post( action, data ).done( okCallback ).fail( errCallback )

你的例子：

wp.ajax.post( "get_data", {} )
  .done(function(response) {
    alert("Your vote could not be added");
    alert(response);
  });

PHP代码

当然，您仍然需要wp_ajax_*在 PHP 脚本中创建钩子。

add_action( 'wp_ajax_nopriv_get_data', 'my_ajax_handler' );
add_action( 'wp_ajax_get_data', 'my_ajax_handler' );

function my_ajax_handler() {
    wp_send_json_success( 'It works' );
}

提示：

对于 Ajax 响应，WordPress 提供了两个功能：

wp_send_json_success( $my_data )和wp_send_json_error( $my_data )- 两个函数都返回一个 JSON 对象并立即终止请求（即它们exit;）

Answer 2

在后端,有一个由WordPress本身定义的全局ajaxurl变量.

WP中的前端不会创建此变量.这意味着如果你想在前端使用AJAX调用,那么你必须自己定义这样的变量.

这样做的好方法是使用wp_localize_script.

假设您的AJAX调用在my-ajax-script.js文件中,然后为此JS文件添加wp_localize_script,如下所示:

function my_enqueue() {
      wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
      wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
 }
 add_action( 'wp_enqueue_scripts', 'my_enqueue' );

本地化JS文件后,可以在JS文件中使用my_ajax_object对象:

jQuery.ajax({
    type: "post",
    dataType: "json",
    url: my_ajax_object.ajax_url,
    data: formData,
    success: function(msg){
        console.log(msg);
    }
});

Answer 3

我有同样的问题。我是 WordPress 新手。因此，我在这里解释一下，是为了让每一个新学习者能够了解ajax在WordPress中是如何调用的。

首先，在位于 wp-content/theme/selected_theme 文件夹下的 function.php 文件中创建一个函数。在这里，selected_theme 可能是你的主题名称。

在上面的问题中，创建了一个名为get_data();的函数。

function get_data() {
    echo  "test";
    wp_die();  //die();
}

add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

在上面两行中，

1. add_action方法用于实现该钩子。在这里，我传递两个参数，第一个是wp_ajax_nopriv_get_data. 在这里，您可以将 get_data 替换为您的选择。节参数是 get_data，它是您要调用的函数名称。
2. 在第二个 add_action 中，我传递两个参数，第一个是wp_ajax_get_data。在这里，您可以将 get_data 替换为您的选择。节参数是 get_data，它是您要调用的函数名称。

这里，如果用户未登录则调用 wp_ajax_nopriv ，而当用户登录时调用 wp_ajax 。

jQuery.ajax({
    type: "post",
    dataType: "json",
    url: "/wp-admin/admin-ajax.php", //this is wordpress ajax file which is already avaiable in wordpress
    data: {
        action:'get_data', //this value is first parameter of add_action
        id: 4
    },
    success: function(msg){
        console.log(msg);
    }
});

Answer 4

使用添加admin-ajax.phpadmin_url('admin-ajax.php');

<script type="text/javascript">
    $('body').on("click", ".re-reset-btn", function(e){

        var panel = $('#re-compare-bar');

        $.ajax({
            type : "POST",
            dataType : "json",
            url : "<?php echo admin_url('admin-ajax.php'); ?>",
            data : {action: "get_data"},
            success: function(response) {
                alert("Your vote could not be added");
                alert(response);
            }
        });

        $("#re-compare-bar-tabs div").remove();
        $('.re-compare-icon-toggle .re-compare-notice').text(0);

    });
</script>