Load more AJAX on WP Query

时间：2017-08-16 作者：scopeak

我试图获得一个AJAX WP查询循环，以输出2篇文章，然后使用“加载更多”按钮加载下一页的结果。目前不起作用的最佳方法是什么？

  var ajaxRequest=function(){
  var filter = $(\'#filter\');
  var page = 1; // What page we are on.
  var ppp = 3; // Post per page
        $.ajax({
            url: filter.attr(\'action\'),
            data: filter.serialize(),
            type: \'POST\',
            dataType: \'json\',
            offset: (page * ppp) + 1,
            ppp: ppp,
            success: function(response) {
              page++;
              $(".card-wrap").append(response); //Post class
              $("#more_posts").attr("disabled",false);
            }
        });
    };

PHP

<?php
    header("Content-type: application/json"); //Outputting as JSON for map data.
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];    
    $args = array(
        \'order\' => $_POST[\'date\'],
        \'post_type\' => \'custom\',
        \'posts_per_page\' => 2,
        \'offset\' => $offset,        
    );
    [Rest of query]
?>

HTML

<a id="more_posts" href="#">Load More</a>

1 个回复

最合适的回答,由SO网友:Jitender Singh 整理而成

如果你想在wordpress中使用ajax，你必须遵循以下步骤：1）首先让你的js文件像main一样。js。

2）在函数中本地化它。php与wp_localize_script().

wp_enqueue_script( \'main.js\', get_template_directory_uri().\'/js/main.js\', array( \'jquery\'  ) );
    wp_localize_script( \'main.js\', \'ajax_object\', array(\'ajax_url\' => admin_url(\'admin-ajax.php\')) );

3）使用javascript或jquery代码运行ajax查询，并在ajax数据对象中添加一个action属性，如action：“load\\u more\\u posts”。此action属性将使函数具有相同的名称来执行我们的代码。

jQuery(function($){
    $(\'#load_more_posts\').on(\'click\', function(e){
        console.log(\'hi\');
        e.preventDefault();
         var $offset = $(this).data(\'offset\');
         console.log(\'var\'+$offset);
        $.ajax({
            method: \'POST\',
            url: ajax_object.ajax_url,
            type: \'JSON\',
            data: {
                offset: $offset,
                action: \'load_more_posts\'
            },
            success:function(response){
                console.log(response);
                $(\'#load_more_posts\').data(\'offset\', parseInt(response.data.offset));

            }
        }); 
    })
});

4）在功能中。php

 add_action( \'wp_ajax_load_more_posts\', \'load_more_posts\' );
    add_action( \'wp_ajax_nopriv_load_more_posts\', \'load_more_posts\' );
    function load_more_posts(){
        global $post;
        $args = array(\'post_type\'=>\'post\', \'posts_per_page\'=> 2, \'offset\'=> $_POST[\'offset\']);
        $rst=[];
        $query = new WP_Query($args);
        if($query->have_posts()):
            while($query->have_posts()):$query->the_post();
                $rst[] = $post;
            endwhile;
            wp_reset_postdata();
            $offset = $_POST[\'offset\']+2;
        endif;
        wp_send_json_success(array(\'post\'=>$rst, \'offset\'=>$offset));
    }

wp\\u ajax\\u nopriv\\u（操作）为未登录的用户执行。wp\\u ajax\\u（操作）为登录的用户执行。

您可以随意使用查询响应。希望这会有所帮助！

结束

标签： wp-query jquery ajax 小码农

PHP包含在AJAX操作中

我的主插件文件中有以下代码<?php include plugin_dir_path( __FILE__) . \'options.php\'; include plugin_dir_path( __FILE__ ) . \'config.php\'; include plugin_dir_path( __FILE__ ) . \'front/manage.php\'; add_action( \'admin_init\', \'restrict_admin\', 1

小码农CODE

Load more AJAX on WP Query

相关推荐

PHP包含在AJAX操作中