如何加载阿贾克斯在Word preSS [英] How to Load Ajax in Wordpress

问题描述

我熟悉与jQuery普通方式使用AJAX。
我周围玩了一段时间，但不知道用什么词preSS需要得到它的工作...
我在这里是从一些教程和文章。
这是的的functions.php 的（在儿童主题）：

  // code加载的jQuery  - 做工精细

// code加载javascript文件 - 做工精细

//启用AJAX：
功能add_ajax（）
{
   wp_localize_script（
    '功能'，
    ajax_script，
    阵列（'ajaxurl'=＆GT; ADMIN_URL（管理-ajax.php'）））;
}

$目录名称= get_stylesheet_directory（）; //使用这个来获得儿童主题目录
require_once（$目录名称/ ajax.php。）;

add_action（wp_ajax_nopriv_function1，功能1）; //在ajax.php功能

add_action（'template_redirect'，'add_ajax'）;
 

jQuery的本身加载和工作的罚款。

我已经尝试了一些基本的AJAX这样的：

  jQuery的（文件）。就绪（函数（$）{
    $（'a.link）。点击（函数（）{
        $阿贾克斯（{
              网址：ajax_script.ajaxurl，
              数据：（{行动：功能1'}），
              成功：功能（数据）{
                     $（'＃结果）HTML（数据）。
              }
        }）;
        返回false;
    }）;
}）;
 

除此之外，我不知道我怎么能测试，看看它甚至正确装入开始说起...

在这里的任何帮助将是AP preciated。

编辑：
在萤火虫此错误：

 的ReferenceError：ajax_script没有定义
       网址：ajax_script.ajaxurl，
 

解决方案

根据你的要求我已经把这个答案给你。

由于HIEU阮在他的回答表明，你可以使用JavaScript变量引用管理-ajax.php文件ajaxurl。然而该变量没有在前端声明。它是简单的声明这个在前端，通过将以下在主题的header.php文件。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    VAR ajaxurl =＆LT; PHP的回声ADMIN_URL（管理-ajax.php'）;？＆gt;中;
＆LT; / SCRIPT＆GT;
 

由于在字preSS AJAX 的文档说明，你有两个不同的挂钩 - wp_ajax_（动作），并wp_ajax_nopriv_（动作）。这些之间的区别是：

• wp_ajax_（动作）：如果Ajax调用从管理面板中所做的这燃煤
• wp_ajax_nopriv_（动作）：如果Ajax调用是由该网站的前端制作这是发射

所有其他的事情上面链接的文档中描述。编码快乐！

P.S。 下面是的应该的工作的一个例子。 （我没有测试过）

前端

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    jQuery.ajax（{
        网址：ajaxurl，
        数据： {
            动作：my_action_name
        }，
        键入：GET
    }）;
＆LT; / SCRIPT＆GT;
 

后端

 ＆LT; PHP
    功能my_ajax_callback_function（）{
        //这里实现Ajax功能
    }
    add_action（'wp_ajax_my_action_name'，'my_ajax_callback_function'）; //如果从管理面板称为
    add_action（'wp_ajax_nopriv_my_action_name'，'my_ajax_callback_function'）; //如果从前端称为
？＆GT;
 

I'm familiar with using ajax in the ordinary way with jQuery.
I've played around it for a while, but don't understand what Wordpress needs to get it to work...
What I have here is taken from some tutorial or article.
This is in functions.php (in a child theme):

// 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');  

The jQuery itself is loading and working fine.

I have tried some basic ajax like the following:

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});   

Besides this, I don't know how I can test to see if it's even loaded correctly to begin with...

Any help here would be appreciated.

EDIT:
In firebug this error:

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

解决方案

As per your request I have put this in an answer for you.

As Hieu Nguyen suggested in his answer, you can use the ajaxurl javascript variable to reference the admin-ajax.php file. However this variable is not declared on the frontend. It is simple to declare this on the front end, by putting the following in the header.php of your theme.

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

As is described in the Wordpress AJAX documentation, you have two different hooks - wp_ajax_(action), and wp_ajax_nopriv_(action). The difference between these is:

• wp_ajax_(action): This is fired if the ajax call is made from inside the admin panel.
• wp_ajax_nopriv_(action): This is fired if the ajax call is made from the front end of the website.

Everything else is described in the documentation linked above. Happy coding!

P.S. Here is an example that should work. (I have not tested)

Front end:

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

这篇关于如何加载阿贾克斯在Word preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！