javascript - 通过 AJAX 在 Wordpress 中动态更改导航链接(下一个和上一个)

Question

在 single.php 的循环中，我有一个选择标签，其中的选项是通过自定义查询返回的当前类别的帖子。

在更改所选选项时，我有许多运行良好的 javascript 函数，但其​​中最后一个函数(function f_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;
        }  
});

}

文件 next-previous.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;

?>

通过给 p 参数赋值来测试此 php 文件时，它会在浏览器中给出合乎逻辑的结果。 Jquery 和函数脚本都包含在内，我网站上的所有 AJAX 都可以。我在这项工作中缺少什么？？？？

更新:请注意，我的 single.php 文件中负责触发 AJAX 调用的部分是:

   <form method="post" action="">  

    <select class="select2"  name="" id="" >
    <option value="<?php the_ID();?>"><?php the_title();?></option>

    <?php 
global $post;
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$myposts = get_posts("paged=$paged&category=4");

foreach($myposts as $post) :?>

        <option value="<?php the_ID();?>"><?php the_title();?></option>

        <?php endforeach;
        wp_reset_postdata(); ?> 

        </select>
        </form>

Answer 1

首先，我想指出，根据几乎在 wordpress 中谈论 AJAX 的教程，我在问题中提到的方法是不好的。所以我决定根据 hakre 和他的链接的建议对其进行更改:http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side .

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

步骤是:

1.提交AJAX请求的JavaScript代码应该是这样的:

    $(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;
                }  

            }); 

    }); 
}); 

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

2- 处理 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();

}

不要忘记 die 函数，它是强制性的。

有关 Wordpress 中 AJAX 的更多详细信息，Google 第一页教程很好。