我是 js 和 jquery 的新手。我正在处理的页面是一个留言板。首先，页面显示 10 条最新消息，然后我的 jquery 函数用于自动更新板，每 2 秒提取新数据。最近的消息显示在顶部。应从页面中删除较旧的消息。
请注意，这是该页面的简化版本。我试图在将其实现到实际页面之前弄清楚逻辑。因此，显示的不是消息，而是 id 等。
<?php
include ("../../db.php");
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js"></script>
</head>
<body>
<script>
function update() {
$("#notice_div").html('Loading..');
$.ajax({
type: 'GET',
url: '2include.php?lastid='+ latestid + '',
timeout: 2000,
success: function(data) {
$("#cont_div").html(data);
$("#cont_div").clone().prependTo($("#newdiv")); // adding the pulled data to newdiv
$("#notice_div").html('');
window.setTimeout(update, 2000);
// animate
$("#newdiv").slideDown(1000,function(){ });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#notice_div").html('Timeout contacting server..');
window.setTimeout(update, 60000);
}
});
}
$(document).ready(function() {
update();
});
</script>
<div id="cont_div"></div>
<div id="newdiv"></div>
<?
$count = 1; // first message is the newest
$get = $DB->query("SELECT * FROM board ORDER BY id DESC LIMIT 10", __FILE__, __LINE__);
while ($msg = $DB->fetch_array($get))
{
echo "<div id='msgid' style='background-color:yellow'>".$msg['id']."</div>";
if($count == 1){
$latestid = $msg['id']; // newest message - passing to js
}
$count++;
} ?>
<script>
var latestid = <?=$latestid?>;
</script>
</body>
</html>
2include.php-
<?
include ("../../db.php");
$la = $_GET['lastid'];
$count = 1; // first message is the newest on load
$get = $DB->query("SELECT * FROM board WHERE id>'$la' ORDER BY id DESC LIMIT 5", __FILE__, __LINE__);
while ($msg = $DB->fetch_array($get))
{
echo "<div id='msgid' style='background-color:red'>".$msg['id']."";
if($count == 1){
$latestid = $msg['id']; // newest message
}
$count++;
?>
<script>
var latestid = <?=$latestid?>; // after pulling the newest message we overwrite latestid with the newest msg id
</script>
<? } ?>
在第一页加载后向表中插入 3 个新行后的结果:
/image/rPf8N.jpg (抱歉还不能发布图片)
最上面的红色是 cont_div，每次拉取新数据时都会出现 2 秒。
- 你觉得我的代码怎么样？我对 jquery 很陌生，对 javascript 不太擅长。这段代码花了我 7 个多小时来构建。
- 动画不起作用(新消息应随滑下动画一起出现。
- cont_div 显示在页面上(图像上红色的顶部)。尝试将内容放入变量或使 div 不可见 - 没有任何效果。如果我将其设置为不可见，则样式将被复制到 new_div，并且它在那里也将不可见。
- 一页上只能显示 10 条消息。我还没有弄清楚如何从页面中删除较旧的消息。
最佳答案
我会将其视为调用中心，并按照收到的顺序回答您的问题:
您认为我的代码怎么样？
总体而言，您的 Javascript 代码非常干净且组织良好。我通常将 Javascript 代码放在外部文件中，而不是直接放在 HTML 中，但这就是我对 Javascript 的建议。我发现的一件小事是，如果您不需要回调，则不必指定回调。这是完全有效的 JQuery:
$("#newdiv").slideDown(1000);
您的 PHP 代码的组织性稍差，但您确实说过将其精简到此处发布，因此我不会评论格式细节。然而，我确实注意到的一件事是，您在这一行中存在安全风险:
$la = $_GET['lastid'];
如果 lastid 设置为 1';删除表板；--？为了防止这种情况，切勿在查询中直接使用用户输入。由于该值是一个 ID，您可以说 $la = intval($_GET['lastid']);，这将强制该值成为整数(字符串将变为 0)。如果您想清理字符串，请查看 mysql_real_escape_string .
动画不起作用
在 HTML 中，id 应该是唯一的。如果您希望多个元素具有相同的值，则应该使用class。在 JQuery 中，您可以将 id 与 # 相匹配，将类与 . 相匹配。浏览器很可能会感到困惑，因为有多个 id 为 newdiv 的 div。此外，默认情况下会显示所有 HTML 元素，除非显式隐藏它们。结果，您告诉浏览器向下滑动已经显示的元素，这就是它什么都不做的原因。我建议向 newdiv 添加一些 CSS，使其默认隐藏 (display: none;)。
cont_div 显示在页面上(图像上红色的顶部)。尝试将内容放入变量或使 div 不可见 - 没有任何效果。
在您的 $.ajax 调用中，我建议添加 dataType: "json" 并且不在 AJAX 函数中返回原始 HTML。如果您想返回状态信息(如果访问数据库时出错怎么办？)，这种方法效果更好，并且可以帮助您将内容与信息分开。这样，您就可以用普通的旧 HTML 设计整个网页，然后根据服务器返回的数据在 Javascript 中添加/删除 HTML 元素。我喜欢将所有 AJAX 调用视为来自第三方的潜在 API 调用。如果其他人要访问该脚本，他们是否也需要您的 HTML，还是只需要信息？
有关 JSON 的更多信息，请查看此快速教程:http://secretgeek.net/json_3mins.asp 。您可能不知道，您已经在 $.ajax 调用中创建了一个 JSON 对象。
一页上只能显示 10 条消息。
就像编程世界中的一切一样，有很多方法可以做到这一点。一种方法是始终将新消息添加到列表顶部，然后使用 JQuery 的 gt 选择器 (http://api.jquery.com/gt-selector/) 删除旧消息。例如，您可以将此行添加到您的 success 函数中，该函数会删除所有带有 msgid 类且具有索引(位置在他们的 parent )大于5:
$("div.msgid:gt(5)").remove();
顺便说一句，欢迎来到网络世界!继续玩耍，不断提出问题。
关于php - 我的第一个 jquery ajax 页面(初学者)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7789142/