我真的搜索了一周以上的信息,但我找不到解决方案。
我使用wp_ajax在wordpress中使用ajax, 我的目标是使用ajax从帖子类型附件中获取图像 我已经做了这一步,但是当我点击按钮调用ajax时,这会显示所有图像附件,我想按顺序显示图像。
我研究有关偏移和分页的循环关系的信息,但所有信息都是关于分页的。
这是我在plugin.php中的代码
add_action( 'wp_ajax_nopriv_post_myaction_add_myaction', 'post_myaction_add_myaction' );
add_action( 'wp_ajax_post_myaction_add_myaction', 'post_myaction_add_myaction' );
function post_myaction_add_myaction($size = "full") {
$post_id = $_POST['post_id'];
$limit = $_POST['limit'];
$offset = $_POST['offset'];
// get images using the get_posts() function
$images = get_posts(array(
'numberposts' => -1, // get all images
'post_mime_type' => 'image', // so we can get images
'numberposts' => $limit,
'post_parent' => $post_id, // get images attached to the current post
'offset' => $offset,
'post_type' => 'attachment',
'order' => 'ASC',
'orderby' => 'menu_order' // pull them out in the order you set them as
));
// loop through images and display them
foreach($images as $image) {
echo wp_get_attachment_image($image->ID, $size); // returns an image HTML tag if there is one
}
die();
}
ajax.js
jQuery(".myaction-button").click(function (e) {
e.preventDefault();
var post_id = jQuery(this).data('id');
var limit = 2;
// offset is the amount of posts which are loaded already
var offset = 2;
jQuery.ajax({
url : postmyaction.ajax_url,
type : 'post',
data : {
action : 'post_myaction_add_myaction',
post_id : post_id,
limit: limit,
offset: offset
},
success : function( data ) {
offset = offset + limit;
jQuery('#myaction-count').append(data);
}
});
return false;
})
我希望在点击其他2 ,,,顺序显示点击2后显示图像。
这项工作但重复相同的值 我有31张图片,但请求只是重复第一张和第二张图片,而不是继续使用3,4 5,6..etc。
我想要更好,如果您发现我的代码有问题,请告诉我如何改进。非常感谢你。
更新
发生了一些奇怪的事情。我创建了另一个帖子,我附加了新图像,当我点击按钮ajax时,我在第五次点击中获得前4次点击(2 + 2 + 2 + 2)想象开始重复,我已经查看了代码并且可以找不到问题,请参阅捕获问题:dropbox.com/s/g732sxyn7w4ep1r/example-ajax-data-repeat.jpg?dl=0¿我该如何解决这个问题?
感谢阅读。
答案 0 :(得分:1)
每次进入点击操作后,您都会重置"偏移量"价值为2。
您需要在此处理程序之外使其成为全局变量。 如果您愿意,也可以将它放在隐藏元素中。
根据建议,这是一段简单的代码:
var offset = 2; // global
jQuery(".myaction-button").click(function (e) {
e.preventDefault();
var post_id = jQuery(this).data('id');
// offset is the amount of posts which are loaded already
var limit = 2;
jQuery.ajax({
url : postmyaction.ajax_url,
type : 'post',
data : {
action : 'post_myaction_add_myaction',
post_id : post_id,
limit: limit,
offset: offset
},
success : function( data ) {
offset = offset + limit;
jQuery('#myaction-count').append(data);
}
});
return false;
})
答案 1 :(得分:1)
好的,所以你有几个问题。这应该解决它:
add_action( 'wp_ajax_nopriv_post_myaction_add_myaction', 'post_myaction_add_myaction' );
add_action( 'wp_ajax_post_myaction_add_myaction', 'post_myaction_add_myaction' );
function post_myaction_add_myaction($size = 'full') {
$post_id = $_POST['post_id'];
$limit = $_POST['limit'];
$offset = $_POST['offset'];
// get images using the get_posts() function
$images = get_posts(array(
'numberposts' => $limit,
'post_parent' => $post_id, // get images attached to the current post
'offset' => $offset,
'post_mime_type' => 'image', // so we can get images
'post_type' => 'attachment',
'order' => 'ASC',
'orderby' => 'menu_order' // pull them out in the order you set them as
));
// loop through images and display them
$out = '';
foreach($images as $image) {
setup_postdata( $image );
$out .= wp_get_attachment_image($image->ID, $size); // returns an image HTML tag if there is one
}
wp_reset_postdata();
wp_die($out);
}
您已将numberposts
设置为-1
和$limit
。您需要删除-1
,因为您不需要返回所有图像,当时只需返回2个。你也回应了结果。不要回声,回归。
定义一个空变量,然后在循环中填充它。使用setup_postdata()
时也要get_posts()
。完成查询后,请务必重置postdata。
接下来,您需要使用die()
或wp_die()
来输出变量,因为这是在AJAX调用中实际输出响应的内容。
对于您的jQuery,假设您在脚本中已经对admin-ajax.php
网址进行了本地化
var post_id = $(this).data('id');
var limit = 2;
var offset = 0; // offset is the amount of posts which are loaded already
$('.myaction-button').click(function (e) {
e.preventDefault();
$.ajax({
url: postmyaction.ajax_url, // in Twenty sixteen it's screenReaderText.ajax_url
type: 'post',
data: {
action: 'post_myaction_add_myaction',
post_id: post_id,
limit: limit,
offset: offset
},
success: function( data ) {
var $data = $(data);
$('#myaction-count').append($data);
},
complete: function() {
offset += limit;
}
});
return false;
});
首先获取div中的数据,设置限制和偏移量,然后单击执行ajax调用,当你完成时增加偏移量(帖子数量) - 这将正确增加每次完成AJAX调用时都会偏移2。
在Tewnty 16上测试了它并且它有效:)希望这有助于^^