Question

我是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个新行后的

结果：

http://i.stack.imgur.com/rPf8N.jpg（抱歉无法发布图片）

顶部的红色是cont_div，每次拉出新数据2秒时都会出现。

您如何看待我的代码？我对jquery很新，用javascript也没那么好。这段代码花了我7个多小时来构建。
动画不起作用（下载动画时应显示新消息。
cont_div显示在页面上（图像上方的顶部红色）。试图将内容放在变量中或使div不可见 - 没有任何效果。如果我使它不可见，那么样式将被复制到new_div，它也将在那里被隐藏。
一页上只能显示10条消息。我还没想出如何从页面中删除旧消息。

Answer 1

我会像呼叫中心那样对待问题并按照收到的顺序回答您的问题：

您如何看待我的代码？
总的来说，您的Javascript代码非常干净且组织良好。我通常将我的Javascript代码放在外部文件中，而不是直接放在HTML中，但这就是我要为Javascript建议的所有内容。我发现的一件小事是，如果你不想要回调，你不必指定回调。这是完全有效的JQuery：

$("#newdiv").slideDown(1000);

你的PHP代码有点不那么有条理，但你确实说你把它修剪到这里发布，所以我不会评论格式细节。然而，我注意到的一件事是你在这一行中存在安全风险：

$la = $_GET['lastid'];

如果lastid设置为1'; DROP TABLE board;--怎么办？为防止这种情况，请不要在查询中直接使用用户输入。由于此值是一个ID，您可以说$la = intval($_GET['lastid']);，这将强制该值为整数（字符串将变为0）。如果要清理字符串，请查看mysql_real_escape_string。

动画无效
在HTML中，id应该是唯一的。如果您希望多个元素具有相同的值，则应使用class。在JQuery中，您将ID与#和带有.的类匹配。浏览器很可能会感到困惑，因为有多个div的ID为newdiv。此外，默认情况下会显示所有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函数中，该函数会删除具有索引（父级中的位置）大于5的类div的所有msgid标记：

$("div.msgid:gt(5)").remove();

顺便说一句，欢迎来到网络世界！继续玩，并保持问题的到来。

Answer 2

Zach Rattner的答案包含一些非常好的细节，另外一条建议是看看jQuery模板，这里有很好的教程：http://www.webistrate.com/jquery-creating-templates-for-your-html-content/

因此，在第二个include中，您应该更新它以返回JSON数据。 jQuery模板可以处理输出新内容而无需克隆div等...然后你可以删除设置最新id的Javascript代码，因为你将在新项目的JSON数组中有这个。

我的第一个jquery ajax页面（初学者）

2 个答案: