AJAX显示/隐藏内容

Question

在任何人抱怨之前，我试过谷歌，但没有一个直接的答案或任何形式的教程。

基本上，我得到的文章中，一个段落被看到然后*阅读更多“链接使用一些javascript它显示更多的内容，虽然最终这将减慢网站，因为文章的其余部分在那里，但只是隐藏。

所以我的问题是，我如何设置AJAX/PHP来引入内容呢？我知道如何在mysql上建立一个数据库，我猜我需要在MySQL中输入文章才能将其存储在数据库中，对吗？抱歉，如果我说的每一件事都令人困惑，但我自己也很困惑。如果有人能为一个绝对的初学者解释，那就太好了，因为即使经过几个小时的搜索，谷歌也不是我的朋友。

​

​

我想我被误解了。上面的屏幕截图已经实现了，但我现在想要做的不是隐藏内容，然后在单击时显示它，以便在使用AJAX、数据库和php时调用它。

Answer 1

1. 在文章表中添加"PreviewCutoffIndex“或类似内容。
2. 在页面加载时，显示文章的HTML /内容直到截止索引。
3. 对于”阅读更多“按钮，将文章标识符放入属性
4. 添加一个进行Ajax调用的单击处理程序，以加载文章的其余部分

标记看起来像这样("data-article-id“来自页面加载的PHP )：

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

Javascript (假设您将使用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);
});

然后，根据$_GET("articleId")，PHP应该为本文的其余部分返回文本(或者更可能的标记)。

Answer 2

即使你明确表示你不想加载整篇文章，我仍然会说你应该：

我敢肯定，当使用ajax获取每篇文章的其余部分时，您的服务器负载会更高，因为每个“阅读更多”操作都需要另一个请求。

另外，如果你正在压缩你的请求，更多的文本对请求的总大小没有太大的影响。

如果你因为你的文章而遇到页面加载缓慢的情况，也许可以尝试查看pagination (显示20篇文章，每批5篇，以生成页面，而不是一次显示20篇文章)

Answer 3

css中的ol‘show/hide方法有什么问题？

这是一种非常高级的方法。

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