4

Wordpress で AJAX リクエストを正しい方法で処理する方法を学ぼうとしています。これを行うために、このチュートリアルを適応させて、(リンクからの) 投稿の ID をページのコンテンツに配置するための非常に単純な AJAX 要求を作成します。

ロジック

  1. #our-work aリンクがクリックされたとき[js]
  2. 投稿 ID を (属性から) 取得し、変数[js]data-idとして保存します。postID
  3. AJAX 経由で渡すpostID(WP のadmin-ajax.phpファイルを使用) [js]
  4. 関数はexample_ajax_requestID を取得し、単純にエコーします[php]
  5. 成功した場合は、サーバーの応答を#herodiv に追加します。

これには何のメリットもないことはわかっていますが、それが機能したら、実際の目的に役立つように機能を修正します。

マイコード

plugins フォルダーに作成した関数のコピーを次に示します。

wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'acl-plugin.js', array( 'jquery' ) );

wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

function example_ajax_request() {
    if ( isset($_REQUEST) ) {
        $postID = $_REQUEST['postID'];
        echo $postID;
    }
    die();
}
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

そして、これがJSファイルのコピーです

jQuery(document).ready(function($) {
    $('#our-work a').click( function() {
        var postID = $(this).attr("data-id");

        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'example_ajax_request',
                'postID' : postID
            },
            success:function(data) {
                $('#hero').append( "Well this seems to work" + data );
            },
            error: function(errorThrown){
                console.log("This has thrown an error:" + errorThrown);
            }
        });
        return false;
    });
});

問題

リンクをクリックすると、JS が起動しますが、次の応答が返されます。

<div id="hero">
    Well this seems to work 0
</div>

アラートを使用すると、AJAX リクエストの前に ID が取得されていることがわかります。だから問題は私の機能にあります。詳細を確認するために、WP のadmin-ajax.phpファイルを (一時的に) 調整die();して、"0" の応答を生成しているものを特定できるようにしました。

die();自分の関数にコマンドがあるため、起動しないと思ったファイルの最後のファイルです。誰かが私が間違っているところを指摘できますか?

4

1 に答える 1