Load Post into DIV with Ajax

时间：2017-01-19 作者：FRQ6692

我正在通过Ajax将帖子加载到我在索引页面上设置的div中。

index page loop:

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div>
       <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
       <?php the_post_thumbnail(); ?>
       <a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title(); ?></a>
    </div>
<?php endwhile; endif; ?>

Div:

<div id="post-container"></div>

script:

<Script>
 $(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this);

        $("#post-container").html("loading...");
        $("#post-container").load(post_link);
    return false;
    });

 });
</script>
How to add posts into div with ajax and assign them specific post format?

1 个回复
最合适的回答,由SO网友:Kudratullah 整理而成

首先你需要register a action callback 为您提供ajax请求
其次，您需要将所有ajax请求发送到wp-admin/admin-ajax.php （两者GET 和POST).
最后，您需要稍微修改javascript以通过action 将触发回调的参数。和var post_link = $(this); 不提供应该使用的post id from rel属性var post_link = $(this).attr("rel");

您可以通过以下方式获取ajax urladmin_url( \'admin-ajax.php\' ); 在您的主题中。和使用javascript localization 进入js。

在你的索引中，其他一切看起来都很好。php

Example

JavaScript

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_id = $(this).attr("rel");
        $("#post-container").html("loading...");
        //$("#post-container").load(post_link+"?action=load_more_post&pid="+post_id);
        // update: .load() should send request to ajax url not the post url
        $("#post-container").load(ajax_url+"?action=load_more_post&pid="+post_id);
    return false;
    });
});
PHP（在主题的function.PHP中）

add_action( \'wp_ajax_load_more_post\', \'load_more_post_callback\' );
add_action( \'wp_ajax_nopriv_load_more_post\', \'load_more_post_callback\' );

function load_more_post_callback() {
    if( isset($_GET["pid"]) ){
        $post = get_post( $_GET["pid"] );
        if( $post instanceof WP_Post ) {
            echo \'<h1 class="post_title">\'.$post->post_title.\'</h1>\';
        } else {
            // nothing found with the post id
        }
    } else {
        // no post id
    }
    wp_die();
}

标签： functions   ajax   小码农  

相关推荐

无法使用AJAX访问数据库中的数据

我正试图在wordpress中首次调用AJAX。我遵循了一些教程，到目前为止已经达到了这一点。但当我试图安慰的时候。将从数据库中获取的数据记录在AJAX调用中，我发现以下错误：未捕获引用错误：未定义数据代码：功能。phpfunction my_ajax_handler(){ global $wpdb; $name = $wpdb->get_results(\"SELECT * FROM username\"); echo $name;