如何在Wordpress中加载Ajax

Question

我熟悉以普通方式在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,

Answer 1

根据您的要求，我已为您解答。

正如Hieu Nguyen在他的答案中建议的那样，您可以使用ajaxurl javascript变量来引用admin-
ajax.php文件。但是，此变量未在前端声明。通过在主题的header.html" target="_blank">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 head标签中。可以通过以下方式利用：

后端 ：

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

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

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