Wordpress で AJAX リクエストを正しい方法で処理する方法を学ぼうとしています。これを行うために、このチュートリアルを適応させて、(リンクからの) 投稿の ID をページのコンテンツに配置するための非常に単純な AJAX 要求を作成します。
ロジック
#our-work a
リンクがクリックされたとき[js]- 投稿 ID を (属性から) 取得し、変数[js]
data-id
として保存します。postID
- AJAX 経由で渡す
postID
(WP のadmin-ajax.php
ファイルを使用) [js] - 関数は
example_ajax_request
ID を取得し、単純にエコーします[php] - 成功した場合は、サーバーの応答を
#hero
div に追加します。
これには何のメリットもないことはわかっていますが、それが機能したら、実際の目的に役立つように機能を修正します。
マイコード
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();
自分の関数にコマンドがあるため、起動しないと思ったファイルの最後のファイルです。誰かが私が間違っているところを指摘できますか?