ajaxurlがフロントエンドで定義されていません


25

前面にajaxformを作成しようとしています。私はコードを使用しています

    jQuery.ajax(
        {
            type: "post",
            dataType: "json",
            url: ajaxurl,
            data: formData,
            success: function(msg){
                console.log(msg);
            }
        });

私はエラーが発生しています

Uncaught ReferenceError: ajaxurl is not definedworklorAjaxBookForm @ 
?page_id=2:291onclick @ ?page_id=2:202

管理バックエンドで同様のコードを使用すると動作します。ajaxリクエストを処理するにはどのURLを使用する必要がありますか?


このチュートリアルを確認してください。あなたを助けるかもしれません。1stwebdesigner.com/implement-ajax-wordpress-themes
Nilambar

回答:


48

バックエンドにはajaxurl、WordPress自体によって定義されたグローバル変数があります。

この変数は、フロントエンドのWPによって作成されません。フロントエンドでAJAX呼び出しを使用する場合は、そのような変数を自分で定義する必要があります。

これを行う良い方法はを使用することwp_localize_scriptです。

AJAX呼び出しがmy-ajax-script.jsファイルにあると仮定して、次のようにこのJSファイルにwp_localize_scriptを追加します。

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

JSファイルをローカライズした後、JSファイルでmy_ajax_objectオブジェクトを使用できます。

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });

2
使用wp_localize_scriptせずに使用できますwp_enqueue_scritpか?
dread_cat_pirate

1
wp_localize_scriptでスクリプトハンドルを使用するため、少なくとも1つのスクリプトにwp_enqueue_scriptを使用する必要があります。しかし... wp_enqueue_scriptを使用しないことはお勧めできません(競合や依存関係の問題が発生する危険があります)。
クシジークドロエドゥ

ロードする外部スクリプトはありません。ajaxurlを使用してajax呼び出しを行いたいだけです。それは不可能ですか?
RT

そして、このAJAX呼び出しをどこに配置しますか?インラインスクリプトとして?それは非常に悪い考えです...
KrzysiekDróżdż

私は別のフォームを持っています。検証と送信時に、フックを追加してもちろんワードプレスの方法でフォームを送信するためのajax呼び出しを管理しています。とにかく、ajaxurlを使用する方法を見つけました。
RT

33

ajaxurlを直接使用するには、プラグインファイルに以下を追加します。

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">
           var ajaxurl = "' . admin_url('admin-ajax.php') . '";
         </script>';
}

その後、ajaxurlfor ajaxリクエストを使用できます。


1
この答えはajaxurl、デフォルトの使用法と同様になります。受け入れられている答えよりもはるかに優れています。
アベルメルキエーデスカレホ

trueですが、.jsファイルで使用している場合は役に立ちません。
ジュール

1
@Jules ajaxurlは引き続き*.jsファイルで使用できます。そのためajaxurlには、ページの読み込みの早い段階で変数を宣言する必要がある場合があります。考慮すべきもう1つの点は、外部*.jsファイルの呼び出しです。外部ファイルを呼び出さなければなりませんAFTERajaxurlインスタンス化されていて、右のURL値を与えられます。
アベルメルキエーデスカレホ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.