通过AJAX动态更改导航链接(下一个和上一个)

时间:2013-03-07 作者:whiteletters in blankpapers

在我的wordpress网站上,我有一个循环。php,一个select标记,其中的选项是通过自定义查询返回的当前类别的帖子。

在更改所选选项时,我有许多javascript函数运行良好,但其中的最后一个函数(函数f\\u next-previous)似乎不起作用。

此功能的目的是在不重新加载页面的情况下更新下一个和上一个链接。

我的模板中与导航链接(下一个和上一个)相关的代码运行良好,如下所示:

<div id="nav-above" class="navigation">

<div class="nav-previous"><?php previous_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/previous.png" />\' ); ?></div>

<div class="nav-next"><?php next_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/next.png" />\' ); ?></div>

</div><!-- #nav-above -->
此函数的javascript代码为:

function f_next-previous(id)
{
       $.ajax({  
       cache: true,  
       type: "GET",  
       timeout: 5000,   
       url: \'wp-content/themes/twentyten/pages/next-previous.php?p=\'+id,  
       success: function(msg)  
        {  

    $(\'#nav-above\').html(msg);

    },  
    error: function(msg)  
    {  
       alert("Your browser broke!");
            return false;
    }  
});

}
下一个上一个文件。php内容为:

<?php
$p=$_GET[\'p\']; 
require( \'../../../wp-load.php\' );



$my_query = new WP_Query();
$my_query->query(array( \'post__in\' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  ?>


<div class="nav-previous"><?php previous_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/previous.png" />\' ); ?></div>
<div class="nav-next"><?php next_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/next.png" />\' ); ?></div>

<?php

endwhile;
endif;

?>
当通过给这个php文件一个p参数值来测试它时,它会在浏览器中给出逻辑结果。Jquery和函数脚本都包含得很好,我的网站中的所有AJAX都可以。我在这项工作中遗漏了什么????

1 个回复
最合适的回答,由SO网友:whiteletters in blankpapers 整理而成

我找到了

首先,我想指出,根据wordpress中几乎所有关于AJAX的教程,我在问题中提到的方法都很糟糕。所以我决定改变方法,使用Wordpress的内置AJAX。

换句话说,针对我的情况,最好的方法是使用wp-admin/admin-ajax。php。AJAX请求应定向到此文件。我知道文件名的“admin”部分有点误导。但是,前端(查看端)以及管理面板中的所有请求都可以在admin ajax中处理。php,有很多好处,尤其是在安全方面。

步骤如下:

1.The JavaScript code that submits the AJAX request should look something like this:

  $(document).ready(function() {
        $(\'.select2\').change(function(e) {
    e.preventDefault();

    var v = $(\'.select2 option:selected\').val(); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", // check the exact URL for your situation
                dataType: \'html\',
                data: ({ action: \'nextPrevious\', id: v}),
                success: function(data){

                $(\'#nav-above\').html(data);

                },
                error: function(data)  
                {  
                alert("Your browser broke!");
                return false;
                }  

            }); 

    }); 
}); 
请注意,在放置JS脚本时,您应该尊重Wordpress的要求(通常在footer.php 之前wp-footer() )

2- Handling the action:

在里面functions.php 在主题中(或直接在插件文件中),添加:

add_action(\'wp_ajax_nextPrevious\', \'nextPrevious\');
add_action(\'wp_ajax_nopriv_nextPrevious\', \'nextPrevious\');
并在同一文件中定义nextPrevious 回调函数如下:

function nextPrevious() {

$p= $_GET[\'id\'];
$my_query = new WP_Query();

$my_query->query(array( \'post__in\' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>

<div class="nav-previous"><?php previous_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/previous.png" />\' ); ?></div>


                        <div class="nav-next"><?php next_post_link( \'%link\', \'<img height="34" src="\' . get_bloginfo("template_directory") . \'/images/next.png" />\' ); ?></div>

<?php endwhile;
endif;                  

wp_reset_query();

die();

}
不要忘记模具功能,这是必需的(谢谢Bainternet).

有关Wordpress中AJAX的更多详细信息,请参阅Google首页教程。

结束