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

实际上，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;）

添加管理员-ajax.php使用admin_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>

<form type="post" action="" id="newCustomerForm">

    <label for="name">Name:</label>
    <input name="name" type="text" />

    <label for="email">Email:</label>
    <input name="email" type="text" />

    <label for="phone">Phone:</label>
    <input name="phone" type="text" />

    <label for="address">Address:</label>
    <input name="address" type="text" />

    <input type="hidden" name="action" value="addCustomer"/>
    <input type="submit">
</form>
<br/><br/>
<div id="feedback"></div>
<br/><br/>

函数.php

wp_enqueue_script('jquery');

function addCustomer() {

    global $wpdb;

    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $address = $_POST['address'];

    if ( $wpdb->insert( 'customers', array(
        'name' => $name,
        'email' => $email,
        'address' => $address,
        'phone' => $phone
    ) ) === false ) {
        echo 'Error';
    } else {
        echo "Customer '".$name. "' successfully added, row ID is ".$wpdb->insert_id;
    }
    die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');

javascript

<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);

function ajaxSubmit() {
    var newCustomerForm = jQuery(this).serialize();

    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: newCustomerForm,
        success: function(data){
            jQuery("#feedback").html(data);
        }
    });

    return false;
}
</script>

我有同样的问题。我是 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);
    }
});