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;
    });
});

除此之外，我不知道如何测试它是否开始正确加载......

这里的任何帮助将不胜感激。

编辑：
在萤火虫这个错误： 

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)。这些之间的区别是：

  • 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。此函数将数据数组作为第三个参数，用于翻译，如下所示：

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

所以这只是将一个对象加载到 HTML 头标签中。这可以通过以下方式使用：

后端：

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

这种方法的优点是它可以在主题和插件中使用，因为您没有将 ajax URL 变量硬编码到主题中。

在前端，现在可以通过 访问 URL ajax.url，而不是ajaxurl在前面的示例中简单地访问。

于 2013-07-18T02:44:28.153 回答
7

首先，您应该彻底阅读此页面http://codex.wordpress.org/AJAX_in_Plugins

其次，ajax_script未定义，因此您应该更改为：url: ajaxurl. 我在上面的代码中没有看到你function1()，但你可能已经在其他文件中定义了它。

最后，学习如何使用 Firebug 调试 ajax 调用，网络和控制台选项卡将成为您的朋友。在 PHP 方面，print_r()或var_dump()将成为你的朋友。

于 2013-07-17T23:53:52.127 回答
2

就我个人而言，我更喜欢在 wordpress 中做 ajax，就像我在任何其他网站上做 ajax 一样。我创建了一个处理器 php 文件来处理我所有的 ajax 请求并只使用该 URL。所以这是因为 htaccess 在 wordpress 中并不完全可能，所以我执行以下操作。

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代码中，我可以像这样使用我的网址

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

显然你可以添加任何你想要的之前、成功或错误类型的东西......但是是的，这是（我相信）更简单的方法，因为你避免了在 8 个不同的地方告诉 wordpress 的所有愚蠢什么是什么会发生，这也让你避免做你看到人们做的其他事情，他们将 js 代码放在页面级别，这样他们就可以进入 php，我更喜欢将我的 js 文件分开。

于 2013-10-16T23:42:34.453 回答
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 回答
1

我不允许发表评论，所以关于 Shane 的回答，请记住

wp_localize_scripts()

必须连接到 wp 或 admin enqueue 脚本。所以一个很好的例子如下：

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 回答