web-dev-qa-db-ja.com

ワードプレス AJAX header.phpに

私は現在Wordpress AJAXを勉強していますが、エラーメッセージが表示され続けます（成功関数は実行されていません）

現在、私はAJAX Requestを送信するJavaScriptを含むようにheader.php（14テーマ）を変更しました。

<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<script type="text/javascript">

    jQuery(document).ready(function($){

    //AJAX
    $.ajax({

        type: "GET",
        dataType: "json",
        url: "<?php echo admin_url('admin-ajax.php'); ?>;",
        data: {
            action: 'xn_get_event'
        },
        success: function(response){
            alert("Yes");
        },
        error: function(response){
            alert("omg!");
        }

    }); //END OF AJAX (SEND REQUEST)
}); //END OF READY FUNCTION
</script>

そしてテーマフォルダの中に、json-feed.phpという別のPHPファイルをfunctionsフォルダの中に入れて（つまりtheme_name/functions/json-feed.php）、次のコードを入れました。

header('Content-Type:application/json');


//Needs to include wp-load.php file! 
if(file_exists('../../../../wp-load.php')):
    include '../../../../wp-load.php';
else: //Double checking in case the path is wrong.
    include '../../../../../wp-load.php';
endif;

//AJAX Handler
add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    echo "Wow!";

}

それから私がウェブサイトに行くときそれは "Omg！"と警告し続けます。私には、私はそれがエラー応答を返し続けている理由はわかりません！

themesajax
2
wordwannabe

Ajaxの使い方についてはtonsという質問があるので、あなたの質問は簡単に重複しているとマークすることができます。 。

  1. WordpressのAjaxはadmin-ajax.phpファイルで処理されます。Ajaxリクエストを正しく送信した場合は、Ajax呼び出しのurlパラメータを参照してください。だから、あなたはwp-load.phpをインクルードする必要はない、Wordpressはすでにロードされている。
  2. あなたのテーマフォルダからのファイルjson-feed.phpは、あなたがfunctions.phpファイルあるいはその子孫ファイルでそれをincludeしない限り、決して実行されません。
  3. Ajaxアクションが終了したときには、常に終了する必要があります（ wp_send_json を使用していないこと、および既に終了している関連関数を解放していること）。
  4. AjaxリクエストのURLパラメータにタイプミスがあります（最後の;を参照）。
  5. 応答ヘッダーに指定されているコンテンツタイプが、応答出力の実際のコンテンツタイプと一致しません。

簡単な例としては、このコードをfunctions.phpファイルに含め、URLパラメータのタイプミスを修正してください。

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    echo 'Wow!';
    exit;

}

また、コードのようにjavascrptに依存関係がある場合は、インラインのjavascriptをheader.phpまたはその他のテンプレートファイルに直接含めないでください。依存関係がどのように処理されるのかはわかりません。たとえば、javascriptはjQueryに依存していますが、jQueryファイルはフッターに移動することができ、jQueryが読み込まれる前に印刷されるため、jQueryコードは機能しなくなります。適切なWordpress関数を使用してJavaScriptを組み込み、依存関係を管理します。もっと良いコードは次のようになります。

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    $data = array( 'message' => 'Wow!' );
    wp_send_json( $data );

}

add_action('wp_enqueue_scripts', 'cyb_enqueue_scripts');
function cyb_enqueue_scriptss() {

    //Register my script
    //Update with the correct path to javscript file
    wp_register_script('my-script', get_stylesheet_directory_uri(). '/js/my-script.js', array( 'jquery' ) );

    //Enqueue scripts and dependencies
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'my-script' );

    //Localize js variables to be used in my-script.js
    $scriptData = array(
                      'ajaxurl' => admin_url('admin-ajax.php')
                     );
    wp_localize_script( 'my-script', 'my_script_data', $scriptData );

}

My-script.jsファイルの内容は次のようになります。

jQuery(document).ready(function($){

    //AJAX
    $.ajax({

        type: "GET",
        dataType: "json",
        url: my_script_data.ajaxurl,
        data: {
            action: "xn_get_event"
        }
    })
    .done( function( response ) {
            alert( response.message );
    })
    .fail( function( response ){
            alert( "omg!" );
    });
});

詳細については、 WP Ajax API 、または WordpressでAjaxを使用 に関するその他多数の質問や例に関するドキュメントを参照してください。

注：コードはテストされていません。

5
cybmeta