web-dev-qa-db-ja.com

クエリ変数を渡すための正しい方法 AJAX ajaxurlを使う

このトピックのタイトルを付ける方法がわかりませんでした。

私はデフォルトの振る舞いを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を処理し、ページをリロードせずにし、適切な応答を取得します。

私はこの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からクエリを送信して応答を返す必要があります。

これが私が試したものです：

これを上記の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にクエリを送信する必要があると私は理解していますが、どうすればいいですか？

phpajaxqueryurls
5
Andrei Surdu

私はついにそれを手に入れました。

最初の間違いは、同じ機能を2回処理することでした。私は関数の後に一度、そしてajaxアクションの中でもう一度それを呼び出しました。そのため、Ajax呼び出しを使用すると、関数は2回実行されました。 OPからの例では、これはまったく問題になりません。それは1つのことだけを行うように単純化されているからです。

また、私はajaxを止めてカスタムレスポンスを取得する必要がありました。これが私がしたことです：

1. これを変更しました： 

smk_remove_post();

これに： 

add_action('parse_query', 'smk_remove_post');

特別な処置で必要になったときに、後でこの機能を実行することをお勧めします。

2. 次に、ajaxハンドラを修正しました。 この行smk_remove_post();を削除し、ajaxアクションをwp_ajax_smk_remove_post_ajaxからwp_ajax_smk_remove_postに変更しました。

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

3. クエリ文字列reactionをactionに変更しました。 URLで変更し、機能します。

4. 最後にjQueryスクリプトを修正しました。そのため、admin-ajax.phpを使用してデータとしてURLを送信します。

url: ajaxurl,
data: _this.attr('href'),

これが最終的なコードです。

リンク： 

<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();

編集： 上記のコードを少し更新。クエリ文字列を処理するには、サイトパスを削除する必要があります。そうしないと、予期しない問題が発生する可能性があります。これをdata hrefに追加しました：

.split('?')[1]
3
Andrei Surdu

このようなリンクを作成

<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 に関するCodexを参照してください。そして、コーデックスでは、それは言います：

ほとんどの場合、Ajaxコールバック関数でwp_die（）を使用する必要があります。これにより、WordPressとの統合が改善され、コードのテストが簡単になります。

したがって、wp_die();の代わりにdie();を使用します

1
Rene Korss

AJAXは不思議ではありません。URLXをリクエストすると、ブラウザのアドレスバー、リンク、またはAJAXからURLを入力した場合、そのURLに同じHTMLが表示されます。そのため、もしあなたが違う応答をしたいのであれば、あなたが - できないHTMLは - リンクのようにajaxリクエストに同じURLを使うことはできません。

Wordpressはajaxリクエストを処理するための特別な「エンドポイント」を持っています - admin-ajax.phpとすべてのajaxリクエストはそれだけに送られるべきです、$.ajax({url:....admin-ajax.php})のようなものです。

次に、WordPressに何をしたいのかを知らせる必要があります。そのため、リクエストにはactionという名前の特別なパラメータがあります。このパラメータは、リクエストを処理するためにサーバー側で使用されるフックを識別します。この部分は、コード内で正しく行いました。

これで、AJAX操作によってどのオブジェクトを操作または取得する必要があるかを識別する追加のパラメータが必要になります。例えば投稿のパーマリンクや投稿IDを使うことができますが、それはすべてあなたがやろうとしている操作の複雑さに依存します。あなたの特定のケースでは、投稿IDがリクエストを渡すための最良のパラメータになると思います。

パラメータの送信方法POSTを実行するとき、ほとんどの人がAJAXリクエストを実行しますが、GETを使用する場合は、URLの一部としてそれらを渡すことができます（jqueryがあなたのために正確に実行するものです）。 。

1
Mark Kaplun