30

jQuery で通常の方法で ajax を使用することに慣れています。
私はしばらくそれをいじりましたが、Wordpress が機能するために何が必要かを理解していません...
ここにあるものは、いくつかのチュートリアルまたは記事から取得したものです。
これはfunctions.phpにあります(子テーマ内):

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
   wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');

jQuery 自体が読み込まれ、正常に動作しています。

次のような基本的な ajax をいくつか試しました。

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});

これに加えて、そもそも正しくロードされているかどうかをテストする方法がわかりません...

ここで何か助けていただければ幸いです。

編集:
firebug では、このエラー: 

ReferenceError: ajax_script is not defined
       url:   ajax_script.ajaxurl,
4

6 に答える 6

66

あなたの要求に従って、私はこれをあなたの答えに入れました。

Hieu Nguyen が彼の回答で示唆したように、ajaxurl javascript 変数を使用して admin-ajax.php ファイルを参照できます。ただし、この変数はフロントエンドでは宣言されていません。これをフロント エンドで簡単に宣言するには、テーマの header.php に次のコードを記述します。

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

Wordpress AJAXドキュメントで説明されているように、wp_ajax_(action) と wp_ajax_nopriv_(action) という 2 つの異なるフックがあります。これらの違いは次のとおりです。

  • wp_ajax_(action): これは、管理パネル内から ajax 呼び出しが行われた場合に発生します。
  • wp_ajax_nopriv_(action): ウェブサイトのフロントエンドから ajax 呼び出しが行われた場合に発生します。

他のすべては、上記のリンク先のドキュメントに記載されています。ハッピーコーディング！

PSこれはうまくいくはずの例です。(私はテストしていません)

フロントエンド:

<script type="text/javascript">
    jQuery.ajax({
        url: ajaxurl,
        data: {
            action: 'my_action_name'
        },
        type: 'GET'
    });
</script>

バックエンド:

<?php
    function my_ajax_callback_function() {
        // Implement ajax function here
    }
    add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' );    // If called from admin panel
    add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' );    // If called from front end
?>

更新 これは古い回答ですが、人々から好評を博しているようです-これは素晴らしいことです! これは一部の人には役立つと思います。

WordPress には関数wp_localize_scriptがあります。この関数は、次のように、変換を目的とした 3 番目のパラメーターとしてデータの配列を受け取ります。

var translation = {
    success: "Success!",
    failure: "Failure!",
    error: "Error!",
    ...
};

したがって、これはオブジェクトを HTML の head タグにロードするだけです。これは、次の方法で利用できます。

バックエンド:

wp_localize_script( 'FrontEndAjax', 'ajax', array(
    'url' => admin_url( 'admin-ajax.php' )
) );

この方法の利点は、ajax URL 変数をテーマにハードコーディングしていないため、テーマとプラグインの両方で使用できることです。

フロント エンドでは、前の例ではajax.urlなく、から URL にアクセスできるようになりました。ajaxurl

于 2013-07-18T02:44:28.153 に答える
2

wp_localize_script を使用して、そこに URL を渡します。

wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );

次に、js内で、次のように呼び出すことができます

admin_url.ajax_url
于 2015-05-20T13:07:08.597 に答える
2

個人的には、他のサイトで ajax を行うのと同じ方法で wordpress で ajax を行うことを好みます。すべての ajax リクエストを処理するプロセッサ php ファイルを作成し、その URL を使用します。これは、wordpressではhtaccessが正確に可能ではないため、次のことを行います。

1. wp-content フォルダーにある htaccess ファイルで、既にあるものの下にこれを追加します

<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>

この場合、プロセッサ ファイルは forms.php と呼ばれます。これを、header.php、footer.php などの他のすべてのファイルと一緒に wp-content/themes/themeName フォルダーに配置します。テーマ内に存在するだけです。根。

2.) 私の ajax コードでは、このように自分の URL を使用できます

$.ajax({
    url:'/wp-content/themes/themeName/forms.php',
    data:({
        someVar: someValue
    }),
    type: 'POST'
});

明らかに、以前、成功、またはエラーのタイプのものを追加できます...しかし、8つの異なる場所でwordpressに何が何であるかを伝えるというばかげたことをすべて回避するため、これは（私が信じている）それを行うためのより簡単な方法ですこれにより、ページレベルでjsコードを配置した場所で人々が行っている他のことを回避できるため、jsファイルを分離したい場所でphpに浸ることができます。

于 2013-10-16T23:42:34.453 に答える
1

コメントすることは許可されていないため、シェーンの回答に関しては、

wp_localize_scripts()

wp または admin エンキュー スクリプトにフックする必要があります。したがって、良い例は次のようになります。

function local() {

    wp_localize_script( 'js-file-handle', 'ajax', array(
        'url' => admin_url( 'admin-ajax.php' )
    ) );

}

add_action('admin_enqueue_scripts', 'local');
add_action('wp_enqueue_scripts', 'local');`
于 2020-06-23T19:10:12.543 に答える
-2

jsファイルはすでにロードされているので、別のadd_ajax関数で再度ロード/エンキューする必要はないと思いました。
しかし、これは必要であるに違いありません。または、私がこれを行い、現在は機能しています。

うまくいけば、他の誰かを助けるでしょう。

質問から修正されたコードは次のとおりです。

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
    wp_enqueue_script(
       'function',
       'http://host/blog/wp-content/themes/theme/js.js',
       array( 'jquery' ),
       '1.0',
       1
   );

   wp_localize_script(
      'function',
      'ajax_script',
      array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');
于 2013-07-18T02:12:49.937 に答える