AJAX显示/隐藏内容

before anyone complains ive tried google but there isnt a straight forward answer or tutorial of any sort..

Basically ive got articles where a paragraph is seen then a *read more" link which using some javascript it shows more content, although eventually this will slow down the website as the rest of the article is there but just hidden.

So my question is how would i set up a AJAX/PHP to bring in the content instead? i know how to set up a database on mysql and am i right in guessing i would need to type out the article in MySQL when storing it in there? sorry if everything im saying is confusing but im confused myself... if anyone could explain for an absolute beginner that would be great as google just isn't my friend even after hours of searching.

readmore pic

Think ive been misunderstood. The above screenshot ive already achieved but what im wanting to do now is instead of hiding content then displaying it on-click to have it being called in using AJAX, a database and php

  1. Add a "PreviewCutoffIndex" or similar to the articles table.
  2. On page load, display the article HTML / content up to the cutoff index.
  3. For the "read more" button, put the article identifier into an attribute
  4. Add a click handler that makes an Ajax call, to load the rest of the article

Markup would look something like this ("data-article-id" comes from PHP on the page load):

<div>
    <?php echo $mysqlResult["articleContent"]; ?>
</div>
<a id="moreButton" data-article-id="<?php echo $articleId; ?>" href='#'>Read More</div>
<div id="moreContent"></div>

Javascript (assume you're going to use JQuery):

$("#moreButton").on("click", function(e) {
    e.preventDefault();
    var articleId = $(this).attr("data-article-id");

    // load article into "moreContent" div
    $("#moreContent").load("content.php?articleId=" + articleId);
});

Then the PHP content.php should return text (or more likely markup) for the remainder of the article, based on $_GET("articleId").

Eventhough you specifically said you don't want to load the entire article, I'm still gonna say you should:

I'm quite sure your server load will be higher when using ajax to get the rest of each article, because you'll need another request per 'read more' action.

Plus if you're gzipping your request, a little more text won't matter a lot on the overal size of the request.

If you're running into a slow page load because of your articles, perhaps try looking into pagination (show like 20 articles in batches of 5, to make pages, rather than 20 articles all at once)

Whats wrong with the ol' show/hide method in css?

see this for a pretty advanced method.

http://cssdeck.com/labs/css-only-showhide