Ajax请求从PHP

时间:2016-05-16 12:20:27

标签: jquery ajax wordpress loops

我真的搜索了一周以上的信息,但我找不到解决方案。

我使用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

¿我该如何解决这个问题?

感谢阅读。

2 个答案:

答案 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上测试了它并且它有效:)希望这有助于^^