小编典典

如何在Wordpress中加载Ajax

ajax

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

阅读 231

收藏
2020-07-26

共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调用,则将触发此事件。

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

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 。

2020-07-26