javascript 通过 AJAX 在 Wordpress 中动态更改导航链接（下一个和上一个）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15175020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically changing navigation links (next and previous) in Wordpress via AJAX
提问by Adib Aroui
Inside the loop of single.php, I have a select tag in which the options are the posts of the current category returned via a custom query.
在 single.php 的循环中，我有一个 select 标签，其中的选项是通过自定义查询返回的当前类别的帖子。
On changing selected option, I have many javascript functions that are working well, but the last function among them (function f_next-previous), doesnt seem to work.
在更改所选选项时，我有许多运行良好的 javascript 函数，但其中的最后一个函数 ( function f_next-previous) 似乎不起作用。
The aim of this function is to update the next and previous links without reloading the page.
此功能的目的是在不重新加载页面的情况下更新下一个和上一个链接。
Here is the code for navigation links (next and previous) in template:
这是模板中导航链接（下一个和上一个）的代码：
<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 -->
The javascript code of this function is:
这个函数的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;
}
});
}
The file next-previous.phpcontent is :
文件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;
?>
While testing this php file by giving it a value to the p parameter, it gives logical result in the browser. Jquery and function scripts are well included and all AJAX in my website is ok. What am I missing in this work????
在通过给 p 参数一个值来测试这个 php 文件时，它会在浏览器中给出逻辑结果。很好地包含了 Jquery 和函数脚本，并且我网站中的所有 AJAX 都可以。我在这项工作中缺少什么？？？？
UPDATE:Note that the part of my single.php file responsible of triggering the AJAX call is:
更新：请注意，我的 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>
回答by Adib Aroui
First, I want to note that the approach I mentionned in my question is bad according to almost tutorials talking about AJAX in wordpress. So I decided to change it based on the advice of hakreand his link : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.
首先，我想指出，根据几乎在 wordpress 中谈论 AJAX 的教程，我在问题中提到的方法很糟糕。所以我决定根据hakre他的建议和他的链接来改变它：http: //codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side。
In other words, the best way for my situation is to use the built-in AJAX in Wordpress, using the wp-admin/admin-ajax.php. AJAX requests should be directed to this file. I know the “admin” part of the file name is a bit misleading. but all requests in the front-end (the viewing side) as well as the admin panel can be processed in admin-ajax.php, with a lot of benefits, especially for security.
换句话说，对于我的情况，最好的方法是在 Wordpress 中使用内置的 AJAX，使用 wp-admin/admin-ajax.php。AJAX 请求应定向到此文件。我知道文件名的“admin”部分有点误导。但是前端（查看端）以及管理面板中的所有请求都可以在 admin-ajax.php 中处理，具有很多好处，尤其是在安全方面。
The steps are:
步骤是：
1.The JavaScript code that submits the AJAX request should look something like this:
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;
}
});
});
});
Note that you should respect the requeriements of Wordpress in putting the JS script (generally in footer.php before wp-footer() )
请注意，您应该尊重 Wordpress 在放置 JS 脚本时的要求（通常在 wp-footer() 之前的 footer.php 中）
2- Handling the action:
2-处理动作：
in functions.phpof your theme (or directly in your plugin file), add:
在functions.php您的主题中（或直接在您的插件文件中），添加：
add_action('wp_ajax_nextPrevious', 'nextPrevious');
add_action('wp_ajax_nopriv_nextPrevious', 'nextPrevious');
and define in the same file nextPreviouscallback function like this:
并在同一个文件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();
}
Do not forget the die function, it is mandatory.
不要忘记 die 功能，它是强制性的。
For more details about AJAX in Wordpress, Google first page tutorials are good.
有关 Wordpress 中 AJAX 的更多详细信息，谷歌首页教程很好。
