web-dev-qa-db-ja.com

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

私はフロントサイドで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を使用する必要がありますか？

plugin-developmenttheme-developmentajaxjquerywp-enqueue-script
25
dread_cat_pirate

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

この変数はフロントエンドの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);
        }
    });
46
Krzysiek Dróżdż

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

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

それからajaxリクエストにajaxurlを使うことができます。

23
R T