如何在Wordpress中加载Ajax

php jquery ajax wordpress

2022-08-30 14:27:03

我熟悉在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;
    });
});

除此之外，我不知道如何测试它是否完全加载...

任何帮助将不胜感激。

编辑：
在火虫中此错误：

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

答案 1

根据您的要求，我已将此放在您的答案中。

正如 Hieu Nguyen 在他的回答中建议的那样，你可以使用 ajaxurl javascript 变量来引用 admin-ajax.php 文件。但是，此变量未在前端声明。通过在主题的标头中放置以下内容，在前端声明这一点很简单.php。

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

如 Wordpress AJAX 文档中所述，您有两个不同的钩子 - wp_ajax_（操作）和wp_ajax_nopriv_（操作）。两者之间的区别在于：

wp_ajax_（操作）：如果从管理面板内部进行 ajax 调用，则会触发此命令。
wp_ajax_nopriv_（操作）：如果从网站的前端进行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 head 标记中即可。这可以通过以下方式使用：

后端：

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

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

在前端，现在可以通过访问 URL，而不仅仅是在前面的示例中。ajax.urlajaxurl

答案 2

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

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

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