To Load WordPress Post Content Using jQuery AJAX

Target: Click on the entry titles from homepage, then load the content without AJAX refreshing, and display the SlideDown effect with jQuery.

HTML Structure:

<div class="post-home">
    <div class="post-title"><h2>title</h2></div>
    <div class="post-content"><p>content</p>
</div>

In functions.php, add:

function ajax_post(){
    if( isset($_GET['action'])&& $_GET['action'] == 'ajax_post'){
        $ariticle_id=$_GET['id'];
        query_posts("p=$ariticle_id");the_post();the_content();
        die();
    }else{
        return;
    }
}
add_action('init', 'ajax_post');

Then we can display the content of id=123 entry using links like http://YOU-DOMAIN.COM/?action=ajax_post&id=123.

The jQuery AJAX code:

$('#postlist .post-home .post-title').click(function() { //The event of clicking on titles
    if($(this).next().html()=="" || $(this).next().is(":hidden")){ //If the entry has no content or is 'display:none', implement following code
 
    var postId=$(this).parent().attr("id").replace(/^post-(.*)$/,'$1'); //Get entry ID
    var postContent=$(this).next();
    $.ajax({
        url:"?action=ajax_post&id="+postId,
        success:function(data){
            $('#postlist .post-home .post-content').slideUp(500);
            postContent.html(data).slideDown(500);
        }
    });
    return false;
    }else{ //Or, implement following code
        $(this).children().children().text('LOADING......'); /change title
        window.location = $(this).children().children().attr('href'); //Open article link
    }
});