AJAX显示/隐藏内容

Question

AJAX显示/隐藏内容

3

在有人抱怨之前，我已经尝试使用谷歌搜索了，但没有明确的答案或任何教程.. 基本上，我有一些文章，其中一个段落被显示，然后是一个“阅读更多”的链接，它使用一些JavaScript来显示更多内容，虽然最终这将会减慢网站速度，因为其余文章在那里，只是隐藏起来了。

所以我的问题是，我如何设置 AJAX/PHP 来带入内容呢? 我知道如何在 MySQL 上设置数据库，存储时需要在 MySQL 中输入文章，我猜想，我需要做些什么？如果有人能够为一个绝对的初学者解释一下就好了，因为谷歌即使搜索了数小时也没有结果。 readmore pic

我认为我被误解了。上面的截图我已经做到了，但现在我想要做的是，不再隐藏内容，而是使用 AJAX、数据库和 PHP 调用内容。

- box

你如何决定在哪里插入“阅读更多”？也许你可以将内容放在一个div中，然后使用toggle来切换该div。 - Deadlock

抱歉，我不太明白你想说什么。上面的截图是我已经完成的内容，现在我想做的是，不再将文章放在同一个HTML页面上，而是使用AJAX、数据库和PHP创建一种方式来加载其余的文章。 - box

首先，您可能需要将完整文本和缩短版本都保存在数据库中。如果您只是将整个内容保存在数据库中，我能想到的唯一缩短方式是使用echo substr($articletext, 0, 399) . "..."; 这将使服务器发送一个带有...结尾的400个字符长的文本。但这仍然需要完整的数据库提取。 - Ryan Mortensen

虽然这不是我的事，但也许你在网上找不到关于这个的好数据的原因是你所做的改变微不足道。这只是一些文本，不是很多数据，我怀疑将其AJAX隐藏而不是隐藏它不会对加载速度产生太大影响。SQL查询将花费最长时间，现在你又添加了一个查询，这意味着另一个数据库查询和另一个服务器->客户端连接。 - Ryan Mortensen

3个回答

0

CSS中传统的show/hide方法有什么问题？

看看这个相当先进的方法。

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

- Adsy2010

0

虽然你明确表示不想加载整个文章，但我仍然要说你应该这样做：

我很确定使用 Ajax 获取每篇文章的其余部分会使服务器负担更重，因为你需要为每个“阅读更多”操作发出另一个请求。

此外，如果你正在压缩请求，那么一点点额外的文字对于请求的总体大小并不会有太大影响。

如果你因文章而遇到页面加载缓慢的问题，也许可以尝试查看分页（将 20 篇文章按批次展示 5 篇，而不是一次显示 20 篇文章）。

- Richard Deurwaarder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- McGarnagle · Accepted Answer

在文章表中添加“PreviewCutoffIndex”或类似字段。
页面加载时，显示截取索引前的文章HTML/内容。
对于“阅读更多”按钮，将文章标识符放入属性中。
添加点击处理程序，进行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);
});

然后PHP content.php 应该根据$_GET("articleId")返回文章的剩余部分，这些内容可能是文本（或更有可能是标记语言）。