使用已获取的 MySQL 数据行将新的 MySQL 数据附加到 DIV答案

【问题标题】：Append new MySQL data to DIV with already fetched MySQL data rows使用已获取的 MySQL 数据行将新的 MySQL 数据附加到 DIV
【发布时间】：2014-05-10 19:35:06
【问题描述】：

大家好，我开始学习 PHP、Mysql(i) 和 CSS5 一个月了，但我遇到了一个问题，我无法仅用 PHP 解决。必须使用 Jquery 和 Ajax 来解决它，我不知道从哪里开始。我想学习，而不仅仅是复制粘贴代码...

我的情况： 2 个 div：消息和 tinymce

(Div)Messages 包含用户发布的所有消息 (Div)Tinymce 包含一个加载了 tinymce 的输入文本框。

整个消息传递系统运行良好，但如果无需重新加载整个 DIV 就可以获取新消息。目标是将新行添加到已经从 MySQL 数据库获取的数据中，这样内容（如 Youtube 电影）将不会被刷新。新数据可以来自任何进行条目的用户，并且必须添加到已经存在的数据中。

据我所知，这可以通过 JQuery 以及将日期/时间与其他日期/时间进行比较来完成。

【问题讨论】：

我认为您应该将 COMET 视为很好的解决方案 stackoverflow.com/questions/6289824/…

标签： java php jquery mysql ajax

【解决方案1】：

好吧，如果我了解您的问题，请告诉我。您希望人们进入您的网站并看到带有消息和其他带有 a 的文本框，您将在其中输入消息，然后是保存消息的按钮，并自动希望带有消息，从数据中自动加载数据根据。这是你的问题吗？

如果没问题的话。

我有一些想法可以用于 jQuery。

您必须链接 jquery 文件。
在
在 .ready 函数中放置一个带有 .click 的函数。在此功能中，您必须放置当人们单击按钮以保存数据时想要执行的功能。我假设你有一个文件来用 php 接收数据并处理数据，所以我会放一个 .post() 来发送数据。我将使用 .serialize() 从您的 .serialize() 中获取数据。当您在变量“dataReturn”中发送 .post() 时，您可以从保存数据的过程中捕获返回。例如，如果有错误，则为“0”，如果一切正常，则为“1”，在这里我们将发送一个函数 loadMessages 以从数据库中加载消息。一个例子：
loadMessages 函数，在这里你可以放一个 .post() 函数来从数据库中获取消息，你将一个帖子发布到一个 php 文件中读取，我想使用 php 的 json 编码来读取消息然后使用 jquery 读取该 Json 并将消息放入 .我猜你正在使用作为消息，但你可以编辑该部分并使其不同。
最后，在这里，您将在每次发送新消息时加载消息，但如果您不发送消息，则可能是其他用户发送消息，因此您需要间隔使函数 loadMessages 每 5 秒或 10 秒. 函数是 setInterval 你可以在 w3school 中了解这个，它是一个 javascript 函数，第一个参数是函数，第二个参数是发送函数的间隔，以毫秒为单位。

这是一种简单的方法来做你想做的事，你可以使用其他功能来加快速度，但你可以从这个开始，然后你可以做得更好。例如，使用日期来确定哪些消息是新消息，但这是 PHP 的一部分。 :)

$( document ).ready(function() {

  $( "#yourButtonId" ).click(function() {

      var data = $( "#yourFormId" ).serialize();

      $.post( "yourPHPfileToSave.php", data,function( dataReturn ) {

         if(dataReturn==0){
                alert("There's an error.");
         }else{
              loadMessages();
         }
     });
   });
   setInterval(loadMessages(), 5000);
});

function loadMessages(){

    $.post( "yourPHPfileToRead.php",function( dataReturn ) {
           $.each( data, function( key, val ) {
              oldMessages = $("#YouMessagesDivId").html();
             $("#YouMessagesDivId").html(oldMessages+"<li>"+val+"</li>");
         });

     });
}

如果您有问题，请告诉我 :) 问候。祝你有美好的一天。

【讨论】：