我在WordPress网站上,在single.PHP的循环内,是一个select标签,其中的选项是通过自定义查询返回的当前类别的帖子.
在更改所选选项时,我有许多javascript函数运行良好,但它们中的最后一个函数(函数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都可以.我在这项工作中缺少什么？
更新：
请注意,负责触发AJAX调用的single.PHP文件部分是：
<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>
解决方法
首先,我想要注意的是,我在问题中提到的方法很糟糕,根据几乎在教程中谈论有关wordpress的AJAX.所以我决定根据hakre的建议和他的链接来改变它：
http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.
换句话说,对我来说最好的方法是使用wp-admin / admin-ajax.PHP在wordpress中使用内置的AJAX.应将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;
}
});
});
});
请注意,在放置JS脚本时应该尊重wordpress的要求(通常在wp-footer()之前的footer.PHP中)
2-处理行动：
在您主题的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/next.png" />' ); ?></div>
<?PHP endwhile;
endif;
wp_reset_query();
die();
}
不要忘记模具功能,这是强制性的.
有关wordpress中AJAX的更多详细信息,Google首页教程很好.