Wp_ajax()问题..不使用wp_enQueue_脚本?

时间:2011-03-28 作者:mathiregister

嘿伙计们,奇怪的情况。。。我第一次尝试使用wp\\u ajax()。我通常使用普通的jQuery ajax请求,但在我目前的情况下,我遇到了很多错误,所以我考虑尝试wp\\u ajax()。

I don\'t get it though!

下面的代码。。。

// embed the javascript file that makes the AJAX request
wp_enqueue_script( \'my-ajax-request\', plugin_dir_url( __FILE__ ) . \'js/ajax.js\' );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( \'my-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
结束于。。。

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */
然而,我没有一个插件或任何应该使用它的东西,但我的整个页面都必须执行这个ajax请求。因此,整个第一行wp_enqueue_script() 没有意义。我不需要为此加载特定的js文件,因为我已经有了script.js 手动嵌入到my中的文件<head> 部分这就是ajax请求被激发的地方。但是一旦我把这一行删掉(//wp_enqueue_script()...) 第二部分不起作用。

所以不会有

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */
被打印到我的页面的我的部分。我做错了什么?我真的需要能够在我的普通脚本中触发ajax请求。js文件。

有什么想法吗?

更新:我的脚本。js文件(手动嵌入my中)应调用ajax请求:

var response;
            $.post(
                // see tip #1 for how we declare global javascript variables
                MyAjax.ajaxurl,
                {
                    // here we declare the parameters to send along with the request
                    // this means the following action hooks will be fired:
                    // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
                    action : \'wp_ajax_nopriv_searchmap\',
                },
                function( response ) {
                    $sr.html(response);
我的函数中的函数。我要调用的php文件如下所示:

// embed the javascript file that makes the AJAX request
wp_enqueue_script( \'my-ajax-request\', plugin_dir_url( __FILE__ ) . \'js/ajax.js\' );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( \'my-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

// this hook is fired if the current viewer is not logged in
if (isset($_GET[\'action\'])) {
    do_action( \'wp_ajax_nopriv_\' . $_GET[\'action\'] );
}
// if logged in:
if (isset($_POST[\'action\'])) {
    do_action( \'wp_ajax_\' . $_POST[\'action\'] );
}
if(is_admin()) {
    add_action( \'wp_ajax_searchmap\', \'my_searchmap_function\' );
} else {
    add_action( \'wp_ajax_nopriv_searchmap\', \'my_searchmap_function\' );
}

function my_searchmap_function() {

// Start output buffer
ob_start();
?>
div>
    <h3>Pages</h3>
        <ul>
            <?php wp_list_pages(\'title_li=&depth=0&exclude=\'); ?>
        </ul>
    <h3>Posts</h3>
        <?php $first = 0;?>
        <ul>
        <?php
        $myposts = get_posts(\'numberposts=-1&offset=$first\');
        foreach($myposts as $post) :
        ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
        </ul>
    <h3>Categories</h3>
        <ul>
            <?php wp_list_categories(\'title_li=&orderby=name\'); ?>
        </ul>
</div>  
<?php 

    $output = ob_get_contents();

    // Stop output buffer
    ob_end_clean();
    $response = json_encode($output);

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don\'t forget to "exit"
    exit;
}
我在这里误解了什么?我只是希望能够通过ajax从普通javascript文件中请求数据。我需要处理javascript文件中返回的html。

你知道我做错了什么或做得更好吗?我必须做些什么才能让这一切顺利进行?

2 个回复
最合适的回答,由SO网友:t31os 整理而成

好的,首先让我把它分解一下,这样您就了解了这些函数的用途。

  • wp_enqueue_script()

    Description:
    向WordPress生成的页面添加javascripts的安全方法。基本上,如果尚未包含脚本,请包含脚本,然后加载WordPress提供的脚本。

  • wp_localize_script()

    Description:
    本地化脚本,但仅当已添加脚本时。还可以用于在页面中包含任意Javascript数据。

当你本地化一个脚本时,你要做的就是设置一个动作,将Javascript变量打印到页面中,但是这些变量与你注册它们的脚本相关联,这是你传递给它的第一个参数wp_localize_script 也被称为剧本handle.

wp_enqueue_script 用于对javascript文件进行排队,并且wp_localize_script 设计用于伴随通过排队系统加载的脚本。您无法本地化任何内容,因此如果您不排队,wp_localize_script 在这里对你没有用。

通常,您可能会像这样使用这两个。。

$myvars = array( 
    \'ajaxurl\' => admin_url( \'admin-ajax.php\' ),
    \'somevar1\' => $somevar_from_somewhere,
    \'somevar2\' => $somevar_from_elsewhere
);
wp_enqueue_script( \'my-ajax-request\', plugins_url( \'/path/to/somefile.js\', __FILE__ ) );
wp_localize_script( \'my-ajax-request\', \'MyAjax\', $myvars );
然后在页面中生成以下输出。。

<script type="text/javascript" src="path/to/somefile.js"></script>

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php",
    somevar1: "somevalue",
    somevar2: "someothervalue"
};
/* ]]> */
</script>
然后可以在脚本中引用,例如。

jQuery(document).ready( function($) {

    alert( MyAjax.somevar1 ); // Produces somevalue
    alert( MyAjax.somevar2 ); // Produces someothervalue

});
把这些放在一起,你的代码可能会有点像这样。。

// Setup the ajax callback for the "searchmap" action 
add_action( \'wp_ajax_searchmap\', \'my_searchmap_function\' );
add_action( \'wp_ajax_nopriv_searchmap\', \'my_searchmap_function\' );

// The callback function for the "searchmap" action
function my_searchmap_function() {
    $myposts = get_posts(\'numberposts=-1&offset=$first\');
?>
<div> 
    <h3>Pages</h3>
    <ul>
        <?php wp_list_pages(\'title_li=&depth=0&exclude=\'); ?>
    </ul>

    <h3>Posts</h3>
    <ul>
        <?php foreach( $myposts as $post ) : setup_postdata( $post ); ?>

        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

        <?php endforeach; ?>
        <?php wp_reset_postdata(); ?>
    </ul>

    <h3>Categories</h3>
    <ul>
    <?php wp_list_categories(\'title_li=&orderby=name\'); ?>
    </ul>
</div>  
<?php 
    die;
}
JS。。(假设它已排队并本地化)

jQuery(document).ready(function($) {
    $(\'a.myajax\').click(function(){
        var data = {
            action: \'searchmap\' // <--- this is the correct action name
        };
        $.post( MyAjax.ajaxurl, data, function(response) {
            $(\'#myresult\').html(response);
        });
        return false;
    });
});
然后是页面中触发操作所需的实际HTML。。

<a class="myajax" href="#">Click me to fetch ajax content</a>
<div id="myresult"></div>
实际答案关于需要做自己的事情,并为脚本打印VAR,我建议你这样做。。。

add_action( \'wp_head\', \'my_js_vars\', 1000 );

function my_js_vars() {

    // If it\'s not a specific page, stop here
    if( !is_page( \'my-page-with-ajax\' ) )
        return;
    ?>
    <script type="text/javascript">
    /* <![CDATA[ */
    var MyAjax = {
        ajaxurl: \'<?php admin_url(\'admin-ajax.php\'); ?>\',
            somevar: \'somevalue\',
            someothervar: \'someothervalue\'
    };
    /* ]]> */
    </script>
    <?php
    /*
       NOTE: 
       Make sure not to leave a comma after the last item 
       in the JS array, else IE(Internet Explorer) will choke on the JS.
    */
}
为了让其他人阅读,我留下了之前发布的代码。

SO网友:scribu

codex中的本教程简单概述了该过程:

http://codex.wordpress.org/AJAX_in_Plugins

请注意ajaxurl 变量已由WP core定义,但仅在管理区域中定义。要将其添加到前端,请使用:

<?php
function pluginname_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = \'<?php echo admin_url(\'admin-ajax.php\'); ?>\';
</script>
<?php
}
add_action(\'wp_head\',\'pluginname_ajaxurl\');

结束

相关推荐

修改模板并向其中添加jQuery

有一个名为“所有书签”的页面模板,用于显示按类别分组的所有链接。我想通过两种方式对其进行修改:通过单击类别标题,每个类别的链接都应该是可折叠/可扩展的。模板应该接受一个类别列表,以包括或排除可折叠部分的类别,假设我只需要向每个类别标题添加一个类,以便我的jQuery代码可以影响它们。对于类别限制,我可能需要一种将参数传递给模板的方法。然而,我对WP完全没有兴趣,我也不知道如果模板可以使用参数,或者模板需要引用自定义PHP函数,那么jQuery代码应该放在哪里?是将类添加到模板中,还是创建一个新模板?如果模