如何在 Wordpress 中加载 Ajax

Posted 2023-02-24

【中文标题】如何在 Wordpress 中加载 Ajax

【英文标题】：How to Load Ajax in Wordpress

【发布时间】：2013-07-16 15:38:41

【问题描述】：

我熟悉用 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,

【问题讨论】：

***.com/questions/10807368/…

【参考方案1】：

根据您的要求，我已经为您提供了答案。

正如 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 调用是从网站前端进行的，则会触发此事件。

上面链接的文档中描述了其他所有内容。编码愉快！

附： 这是一个应该工作的例子。 （我没有测试过）

前端：

<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 变量硬编码到主题中。

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

【参考方案2】：

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

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

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

【讨论】：

已经在使用我的问题底部所说的萤火虫。并且熟悉 print_r 和 var_dump。我自己继续努力，但只是发布希望有人能发现上面的代码有问题（如果有的话），或者建议一种替代方法。我对您建议的网址进行了更改，但它没有改变任何东西 - 仍然说未定义。我的 function1() 在 ajax.php 文件中，但它没有做任何特别的事情。现在我只想得到任何回应。感谢您的意见。

现在到底什么是未定义的？如果它在抱怨ajax_script is not defined，那么你在其他地方就有了。

ReferenceError: ajaxurl is not defined url: ajaxurl, ..... 刚刚从 firebug 粘贴过来。

ajaurl 在前端不可用 - 它在管理面板中定义，但仅此而已。如果你想在前端定义它，header.php 中的以下内容会很好用：

@Shane - 抱歉，我直到现在才看到这条评论。我只是自己为这个问题添加了一个答案。我认为 add_action("wp_ajax_nopriv_ 涵盖前端使用。

【参考方案3】：

我个人更喜欢在 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 代码中，我可以像这样使用我的 url

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

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

【讨论】：

WordPress 已经内置了适当的机制——为什么要重新发明***？

我个人认为他们的方式非常笨拙——作为开发人员，我宁愿访问我想要的任何包含逻辑的文件。

通常我会构建一个文件夹，其中包含一个返回 json 字符串的不同 ajax 端点文件库。我是否必须在 .htaccess 中为每个文件添加一个新的文件排除规则，或者有没有办法通过使用一个处理文件，具有无限功能，并在其中调用一个函数，将普通方法与 WordPress 方法“混合”处理文件？

我的 wp-content 文件夹没有 .htaccess 文件。

【参考方案4】：

使用 wp_localize_script 并在那里传递 url：

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

然后在js里面，可以通过

admin_url.ajax_url 

【参考方案5】：

我不允许发表评论，所以关于 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');`

【参考方案6】：

我认为既然 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');  

【讨论】：

这是错误的几个方面。你有你的代码中不存在的函数的钩子。