如何在 WordPress 中加载 Ajax

我熟悉以 jQuery 的普通方式使用 ajax。
我已经玩了一段时间了，但不明白 WordPress 需要什么才能让它工作......
我这里的内容取自一些教程或文章。
这是在函数.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;
    });
});   

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

任何帮助将不胜感激。

EDIT:
在萤火虫中出现此错误：

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

根据您的要求，我已将此作为您的答案。

正如 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 http://codex.wordpress.org/AJAX_in_Plugins文档中，您有两个不同的挂钩 - wp_ajax_(action) 和 wp_ajax_nopriv_(action)。它们之间的区别是：

• wp_ajax_(action)：如果 ajax 调用是从管理面板内部进行的，则会触发此操作。
• wp_ajax_nopriv_(action)：如果 ajax 调用是从网站前端进行的，则会触发此操作。

其他所有内容都在上面链接的文档中进行了描述。快乐编码！

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

前端:

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

Back end:

<?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
?>

UPDATE尽管这是一个古老的答案，但它似乎不断得到人们的赞许——这太棒了！我认为这可能对某些人有用。

WordPress有一个功能wp_本地化_脚本 https://codex.wordpress.org/Function_Reference/wp_localize_script。该函数将一个数据数组作为第三个参数，用于翻译，如下所示：

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

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

Backend:

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

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

在前端，现在可以通过以下方式访问 URLajax.url，而不是简单地ajaxurl在前面的例子中。