Php Wordpress：使用Ajax将数据传递到页面

我正在尝试将数据从ajax调用传递到Wordpress的特定页面。
下面是我正在使用的代码：

jQuery.ajax({type: "POST",
            url: 'single-member-page.php',
            data:{ size: 'item' }, 
            success: function(){
              //alert(data);
              jQuery('#display-member-size').text(data);
            }
        });

该脚本不适用于WP。我还使用控制台检查了页面，发现一个错误：

找不到“单成员页面.php”

我是WP的新手，我不知道如何将ajax调用中的数据传递到特定页面。

参考此

基本上，您可以创建一个像

wp\u ajax\u myaction

这样的操作，您可以在

functions.php

或您认为合适的地方定义它。然后调用它，如页面上的示例（用法部分）所示

编辑： 添加一些代码以帮助您理解

在

functions.php中

add_action( 'wp_ajax_my_ajax', 'my_ajax' );
add_action('wp_ajax_nopriv_my_ajax', 'my_ajax');

function my_ajax() {
    die( "Hello World" );
}

在您的JS中：

$.ajax({
        url: "http://yoursite.com/wp-admin/admin-ajax.php",
        data : {action : 'my_ajax'},
        success: function( data ) {
            alert( 'The code says ' + data);
        }
    })

关于代码的几点：

这只是一个快速而肮脏的代码，大部分都是从示例中剽窃出来的，只是为了向您展示它是如何工作的

no_priv操作用于允许未经授权的访问（即非管理员用户）

url
通常不是以示例中所示的方式硬编码的，人们通常使用
admin\uurl（'admin ajax.php'）

数据中发送的
操作
决定了应该调用哪个函数。（
my_ajax
）

如果仍然存在问题，请告知。
简单介绍一下：所有ajax帖子都应该发送到admin-ajax.php。每个请求都需要至少提供一段称为action的数据。基于此操作，admin-ajax.php中的代码创建了两个挂钩。
如果动作的值是cusom\u动作，则会自动创建wp\u ajax\u自定义动作和wp\u ajax\u nopriv\u自定义动作。请检查WordPress coddex。
@Daniel

您提出了一个非常好的问题，在继续解决之前，我们需要了解wordpress ajax的经验规则

拇指规则：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

根据wordpress标准，所有ajax请求都应该在javascript中指向“ajaxurl”。它实际上包含“wp admin/admin ajax.php”文件路径

示例：

$.ajax({
    url: ajaxurl,
    data: {'action':'generateCptApiKey'},
    success:function(data) {
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});

// Register the script
wp_register_script( 'ajaxsettings', 'path/to/ajaxsettings.js' );

// Localize the script with new data
$ajaxsettings = array(
    'ajaxurl' => admin_url('admin-ajax.php')
);
wp_localize_script( 'ajaxsettings', 'ajaxsettings', $ajaxsettings );

// Enqueued script with localized data.
wp_enqueue_script( 'ajaxsettings' );

$.ajax({
        url: ajaxsettings.ajaxurl,
        data: {'action':'generateCptApiKey'},
        success:function(data) {
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });


如果您正在wp admin dashboard部分中执行一些sutff，或者与wp admin部分相关，如在wp admin dashboard区域中创建选项页，则javascript中的“ajaxurl”全局变量将始终可用

如果此ajax请求的大小写是从前端页面/post初始化的，则必须使用以下方法指定admin ajax.php文件路径，如果您将其本地化为前端javascript，则更好，这样它将在javascript变量中可用，就像在wp admin dashboard部分中可用一样

为了实现这一点，我们需要再添加几行代码

方法：

更新了示例代码前端ajax调用：

$.ajax({
    url: ajaxurl,
    data: {'action':'generateCptApiKey'},
    success:function(data) {
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});

// Register the script
wp_register_script( 'ajaxsettings', 'path/to/ajaxsettings.js' );

// Localize the script with new data
$ajaxsettings = array(
    'ajaxurl' => admin_url('admin-ajax.php')
);
wp_localize_script( 'ajaxsettings', 'ajaxsettings', $ajaxsettings );

// Enqueued script with localized data.
wp_enqueue_script( 'ajaxsettings' );

$.ajax({
        url: ajaxsettings.ajaxurl,
        data: {'action':'generateCptApiKey'},
        success:function(data) {
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });

在此之后，我们需要编写方法来处理这个ajax请求，并将输出发送回ajax调用

为了检测wordpress中的ajax请求调用，它们有两个标准钩子，钩子就是事件，就像当我发送ajax请求时，wordpress中与ajax相关的钩子将触发，我可以调用该触发器上的任何函数

因此，处理ajax请求基本上有两个钩子：

：它处理来自已验证/已登录用户的请求。（用于后端wp管理仪表板相关任务）
：它处理前端未经验证的请求。
（用于前端页面/后ajax调用相关任务）
这里（action）是必须在当前主题函数.php文件中编码的方法的名称，此方法将处理此ajax请求

示例：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

面向对象风格：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

注意：这里的“cleanResponseFiles”是处理ajax请求的类的方法，$this指向当前类对象

程序风格：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

注意：这里的“cleanResponseFiles”是在当前的theme function.php文件中添加的函数，它将处理ajax请求

在本文中，我们考虑ajax请求可以从wp admin dashboard或前端页面/post发出

示例ajax请求处理程序方法：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

函数cleanResponseFiles（）{
回声“；
打印（邮政美元）；
回声“；
//在ajax请求处理程序函数end中始终使用exit（）
退出（）；
}

拇指法则：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

在ajax请求处理程序方法中始终使用exit（）方法，这很重要
发送ajax请求的最佳实践是使用
这只是为了避免（跨站点请求伪造），添加一个隐藏的输入字段，该字段带有生成的随机密钥，并且在请求处理程序方法中应该对其进行验证

我们可以使用这些方法创建Wordpress nonce并验证Wordpress nonce和ajax请求处理程序或简单http请求处理程序

Wordpress临时方法：

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));

add_action( 'wp_ajax_cleanResponseFiles',  'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');

function cleanResponseFiles(){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    //Always use exit() in ajax request handler function end
    exit();
}

：用于创建作为隐藏字段发送表单的随机键
：用于验证请求处理程序方法中的随机密钥
在此评论中，我将尽快附上wordpress ajax调用的一个工作示例。
Hi，谢谢你的回复…无论如何…我不太了解如何使用相关的钩子。Hi，非常感谢你的示例。因为我想在名为single member page.php的页面中传递数据…我不理解url admin ajax.php…Hi Kapil非常感谢r非常详细的答案。由于我是WP的新手，我必须深化您提到的所有功能。我将等待您的工作示例。@Daniel只需将您网站的url发送给我，让我知道您想要实现什么？我可以发送示例代码，这将帮助您更好地理解wordress ajax。嗨，Kapil…我正在使用local.An嗯……我想使用post ajax调用将值传递给页面名称