使用ajax获取帖子

Question

我想通过点击函数获得ajax的帖子。

Jquery

$(".get-posts").click(function(){

  $.ajax({  
    type: 'POST',  
    url: '',  
    data: { action : 'get_ajax_posts' },  
    success: function(){  
       // ???
    }
  });  
});

Php

function get_ajax_posts() {
    // Query Arguments
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // The Query
    $ajaxposts = new WP_Query( $args );

    // The Loop
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
                get_template_part('products');
        }
    } else {
        get_template_part('none');
    }
    /* Restore original Post Data */
    wp_reset_postdata();
}
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');

我被堵住了。

Answer 1

选项1

简单的方法--以JSON格式返回所有帖子，并在JavaScript中循环它们。

PHP:

function get_ajax_posts() {
    // Query Arguments
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // The Query
    $ajaxposts = get_posts( $args ); // changed to get_posts from wp_query, because `get_posts` returns an array

    echo json_encode( $ajaxposts );

    exit; // exit ajax call(or it will return useless information to the response)
}

// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

JavaScript:

$.ajax({
    type: 'POST',
    url: '',
    dataType: "json", // add data type
    data: { action : 'get_ajax_posts' },
    success: function( response ) {
        $.each( response, function( key, value ) {
            console.log( key, value ); // that's the posts data.
        } );
    }
});

选项2

获取HTML内容并将其打印到屏幕上。

PHP:

function get_ajax_posts() {
    // Query Arguments
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // The Query
    $ajaxposts = new WP_Query( $args );

    $response = '';

    // The Query
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
            $response .= get_template_part('products');
        }
    } else {
        $response .= get_template_part('none');
    }

    echo $response;

    exit; // leave ajax call
}

// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

JavaScript:

   $.ajax({
        type: 'POST',
        url: '',
        dataType: "html", // add data type
        data: { action : 'get_ajax_posts' },
        success: function( response ) {
            console.log( response );

            $( '.posts-area' ).html( response ); 
        }
    });

在第二个示例中，将.posts-area选择器更改为要打印的选择器。

console.log只是让您能够在控制台中看到AJAX调用返回的信息。你应该在做完之后把它拿掉。