在AJAX中使用ajaxurl传递查询变量的正确方法

时间:2015-03-31 作者:Andrei Surdu

好的,我不知道该如何命名这个主题。

我试图用ajax覆盖默认行为。这里的问题实际上不是一个问题,而是一个更大的愿望。

我有以下url:

<a href="http://example.com/?reaction=smk_remove_post&id=1226&_nonce=7be82cd4a0" class="smk-remove-post">Remove post</a>
functions.php 我有此功能,并在以下时间后立即调用:

function smk_remove_post(){
    if( !empty( $_GET[\'reaction\'] ) && \'smk_remove_post\' == $_GET[\'reaction\'] && !empty( $_GET[\'id\'] ) ){
        if( current_user_can(\'edit_others_posts\') && !empty($_GET[\'_nonce\']) ){
            if( wp_verify_nonce( esc_html( $_GET[\'_nonce\'] ), \'smk_remove_post\' ) ){
                // Delete the post
                wp_delete_post( absint( $_GET[\'id\'] ), true );
            }
        }
    }
}
smk_remove_post();
现在如果我点击ID为的帖子链接1226 将被删除。一切正常。任务成功完成,页面重新加载。

这就是我需要AJAX的地方。我想使用ajax处理此URL,而不是重新加载页面,and get a proper response.

我添加了以下jQuery脚本:

function smk_remove_post(){
    $(\'.smk-remove-post\').on( \'click\', function( event ){
        event.preventDefault();
        var _this = $(this);

        jQuery.ajax({
            type: "GET",
            url: _this.attr(\'href\'),
            success: function(response){
                console.log(response);
                _this.text(\'All great, the post is removed.\');
            }
        });
    });
}
smk_remove_post();
一切正常。该帖子通过ajax删除,无需重新加载页面。但我无法得到正确的响应,而是得到了当前页面的完整HTML源代码。

我知道我应该使用admin-ajax.php(ajaxurl),但我该怎么做呢?我需要从URL发送查询并获得回复。

Here is what I\'ve tryied:

我已将此添加到上面的jQuery脚本中:

data: {
    \'action\': \'smk_remove_post_ajax\',
},
这就是PHP:

function smk_remove_post_ajax(){
    smk_remove_post();
    die();
}
add_action(\'wp_ajax_smk_remove_post_ajax\', \'smk_remove_post_ajax\');
它不起作用。它被忽略了,前面的调用被替代执行,就像这将在没有ajax的情况下完成一样。

我知道我需要以某种方式将查询发送给admin ajax。php,但如何?

3 个回复
最合适的回答,由SO网友:Andrei Surdu 整理而成

我终于明白了。

第一个错误是处理同一个函数两次。我在函数之后调用了它一次,在ajax操作中又调用了一次。因此,在使用ajax调用时,函数执行了两次。在OP的示例中,这根本不是问题,因为它被简化为只做一件事,但在我的实际代码中,它做得更多,并可能导致丢失不需要的数据。

此外,我只需要停止ajax并获得自定义响应,仅此而已。以下是我所做的:

1. 我改变了这一点:

smk_remove_post();
对此:

add_action(\'parse_query\', \'smk_remove_post\');
在特殊操作中需要时,最好稍后运行该函数。

2. <接下来,我修改了ajax处理程序:我删除了这一行smk_remove_post(); 并将ajax操作从wp_ajax_smk_remove_post_ajaxwp_ajax_smk_remove_post:

function smk_remove_post_ajax(){
    wp_die( \'ok\' );
}
add_action(\'wp_ajax_smk_remove_post\', \'smk_remove_post_ajax\');
3. 我已重命名查询字符串reactionaction. 在url中更改了它,函数:

4. 最后修改了jQuery脚本。因此它使用了管理ajax。php并将url作为数据发送:

url: ajaxurl,
data: _this.attr(\'href\'),
以下是最终代码:

Link:

<a href="http://example.com/?action=smk_remove_post&id=1226&_nonce=7be82cd4a0" class="smk-remove-post">Remove post</a>

PHP code:

function smk_remove_post(){
    if( !empty( $_GET[\'action\'] ) && \'smk_remove_post\' == $_GET[\'action\'] && !empty( $_GET[\'id\'] ) ){
        if( current_user_can(\'edit_others_posts\') && !empty($_GET[\'_nonce\']) ){
            if( wp_verify_nonce( esc_html( $_GET[\'_nonce\'] ), \'smk_remove_post\' ) ){
                // Delete the post
                wp_delete_post( absint( $_GET[\'id\'] ), true );
            }
        }
    }
}
add_action(\'parse_query\', \'smk_remove_post\');

function smk_remove_post_ajax(){
    wp_die( \'ok\' );
}
add_action(\'wp_ajax_smk_remove_post\', \'smk_remove_post_ajax\');

Javascript:

function smk_remove_post(){
    $(\'.smk-remove-post\').on( \'click\', function( event ){
        event.preventDefault();
        var _this = $(this);

        jQuery.ajax({
            type: "GET",
            url: ajaxurl,
            data: _this.attr(\'href\').split(\'?\')[1],
            success: function(response){
                console.log(response); // ok
                _this.text(\'All great, the post is removed.\');
            }
        });
    });
}
smk_remove_post();
Edit:也是对上述代码的一个小更新。删除站点路径需要处理查询字符串,否则可能会产生意外问题。我已将此添加到data href:

.split(\'?\')[1]

SO网友:Rene Korss

像这样创建链接

<a href="http://example.com/?reaction=smk_remove_post&id=1226&_nonce=7be82cd4a0" data-id="1226" data-nonce="7be82cd4a0" class="smk-remove-post">Remove post</a>
和jQuery

$(\'.smk-remove-post\').on( \'click\', function( event ){
    event.preventDefault();
    var _this = $(this);

    var data = {
        \'action\': \'smk_remove_post_ajax\',
        \'reaction\': \'smk_remove_post\',
        \'id\': _this.data(\'id\'),
        \'_nonce\': _this.data(\'nonce\')
    };

    // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
    jQuery.ajax({
        type: "GET",
        url: ajaxurl,
        data: data,
        success: function(response){
            console.log(response);
            _this.text(\'All great, the post is removed.\');
        }
    });
});
参见法典关于AJAX in Plugins.在法典中,它说:

大多数情况下,您应该在Ajax回调函数中使用wp\\u die()。这提供了与WordPress更好的集成,并使测试代码更容易。

So使用wp_die(); 而不是die();

SO网友:Mark Kaplun

AJAX并不神奇,当您请求url X时,如果您从浏览器地址栏、链接或AJAX进行请求,您将收到该url的相同HTML。因此,如果您想要不同的响应,那么can not 对ajax请求使用与链接中相同的url。

Wordpress有一个特殊的“终点”来处理ajax请求-管理ajax。php和所有ajax请求应该只发送给它,比如$.ajax({url:....admin-ajax.php})

接下来,您需要让wordpress知道您想要做什么,并且在名为action. 此参数将标识服务器端用于处理请求的挂钩。您在代码中正确地完成了这一部分。

现在,您需要额外的参数来标识AJAX操作应该操作或检索哪个对象。您可以使用post的永久链接,例如post id,但这完全取决于您尝试执行的操作的复杂性。在您的特定情况下,我猜post id将是传入请求的最佳参数。

如何发送参数?大多数人在使用AJAX时都会发出POST请求,但如果您想获取,可以将其作为url的一部分传递(我认为这正是jquery为您所做的)。

结束