如何在 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。

原文由 smarttechy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在后端有 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);
    }
});

原文由 Vigneshwaran J 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有同样的问题。我是 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 替换为您的选择。并且 section 参数是 get_data ，它是您要调用的函数名。
2. 在第二个 add_action 中，我传递了两个参数，第一个是 wp_ajax_get_data 。在这里，您可以将 get_data 替换为您的选择。并且 section 参数是 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);
    }
});

原文由 Sumit Kumar Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议