我的第一个jquery ajax页面(初学者)

my first jquery ajax page (beginner)

本文关键字：初学者 页面 ajax 第一个 jquery 我的      更新时间：2023-09-26

我是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>

2 include.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行后的结果:

https://i.stack.imgur.com/rPf8N.jpg(抱歉还不能发布图片)

顶部的红色是cont_div，每次提取新数据时出现，持续2秒。

    你觉得我的代码怎么样?我对jquery很陌生，对javascript也不是很好。这段代码花了我7个多小时来构建。
  1. 动画不工作(新消息应该随着滑下动画出现)
  2. cont_div显示在页面上(图片上红色的那个)。尝试将内容放在变量中或使div不可见-都不起作用。如果我把它设置为不可见，样式会被复制到new_div，它也会不可见。
  3. 一页只显示10条消息。我还不知道如何从页面上删除旧消息。

我会像呼叫中心一样对待您的问题，并按您收到的顺序回答您的问题:

你觉得我的代码怎么样?
总的来说，您的Javascript代码非常干净且组织良好。我通常将Javascript代码放在外部文件中，而不是直接放在HTML中，但这就是我对Javascript的所有建议。我发现的一件小事是，如果你不想要回调，你不必指定回调。这是完全有效的JQuery:

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

你的PHP代码有点不太有条理，但你确实说过你为了在这里发布而精简了它，所以我不会评论格式细节。然而，我注意到的一件事是，这一行存在安全风险:

$la = $_GET['lastid'];

设置lastid为1'; DROP TABLE board;--会怎样?为了防止这种情况，永远不要在查询中直接使用用户输入。因为这个值是一个ID，你可以说$la = intval($_GET['lastid']);，这将强制值为一个整数(字符串将变成0)。

动画不工作
在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函数中，该函数将删除所有索引(在父类中的位置)大于5的msgid类div标记:

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

顺便说一下，欢迎来到网络世界!继续玩下去，继续提出问题。

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

所以在第二个include中，你应该更新它以返回JSON数据。jQuery模板可以处理输出新内容，而不必克隆div等。然后，您可以删除设置最新id的Javascript代码，因为您将在新项目的JSON数组中拥有它。
相关文章：