Question

基本上，我如何使用jquery动画自动更新mysql查询结果？我希望它看起来像一个动画的新闻源，并在添加结果时向下滑动？这将是多么难以实现以及我将用它做什么？

谢谢，

卡梅伦

Answer 1

首先，您需要一些JS，PHP和HTML技能。

<强> JAVASCRIPT：

function create_ajax()
{
    try
    {
        ajaxRequest = new XMLHttpRequest();
    } 
    catch (e)
    {
        try
        {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            try
            {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e)
            {
                    return false;
            }
        }
    }

    return ajaxRequest;
}

您需要在HTML文件中使用此功能才能启动消息服务：

function StartUp()
{
    /** Jquery **/
    setTimeout(function() {$('#message').fadeOut('fast');}, 5000);
    UserLogService();
}

此功能有助于连接到PHP：

function MessageService()
{
    setTimeout('MessageService()', 60000);

    var ajaxRequest;
    ajaxRequest=create_ajax();

    ajaxRequest.onreadystatechange = 
    function()
    {
        if(ajaxRequest.readyState == 4)
        {
            message = ajaxRequest.responseText.split(';');

            if (message[0])
            {
                headMessageDisplay(message[0], message[1]);
                setTimeout('headMessageNoDisplay()', 30000);
            }
        }
    }

    ajaxRequest.open("GET", "xxx.php", true);
    ajaxRequest.send(null);
}

在PHP中获取消息：

if ($msg)
{
    $this->Show($msg);
    exit();
}

PHP：这显示来自PHP的消息：

private function Show($msg = null)
{

    for ($i = 0; $i < count($msg); $i++)
    {
        $error = $this->html;

        $error = str_replace('{MESSAGE}',  $msg[$i], $error);
        $error = str_replace('{TYPE}', error, $error);
        $error = str_replace('{DISPLAY}', 'block', $error);

        $this->message .= $error;
    }

    print $this->message;
}

这使消息本身：

        $r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message  m JOIN db_table_messagetype t ON (t.id = m.type) WHERE m.processing = '0' AND m.user_id = '".$_REQUEST["user"]->Id."' 
                                        AND m.date != '0000-00-00 00:00:00' AND m.date <= DATE_SUB(NOW(), INTERVAL -1 MINUTE) LIMIT 1");
        $a = $_REQUEST["sql"]->GetRecord($r, 0);

        if (!$a["id"])
        {
            $r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message m JOIN db_table_messagetype t ON (t.id = m.type) WHERE date = '0000-00-00 00:00:00' AND m.processing = '0' AND m.user_id = '".$_REQUEST["user"]->Id."' LIMIT 1");
            $a = $_REQUEST["sql"]->GetRecord($r, 0);
        }

        if ($a["id"])
        {
             $_REQUEST["sql"]->Query("UPDATE db_table_message SET processing = '1' WHERE id = '$a[id]'");
        }
        else
        {
            $r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message m JOIN db_table_messagetype t ON (t.id = m.type) WHERE m.user_id = '0' LIMIT 1");
            $a = $_REQUEST["sql"]->GetRecord($r, 0);
        }

        $this->Show($a["message"], $a["type"]);
    }

    private function Show($message = null, $type = null)
    {
        if ((!$message) || (!$type)) return false;

        switch($type)
        {
            case "information":
                $type = information;
            break;

            case "warning":
                $type = warning;
            break;

            case "error":
                $type = error;
            break;
        }

        print "$message;$type";

使用PHP类从数据库中获取消息......执行此操作需要执行许多操作。我差点忘了通过php在页面加载时从数据库中获取旧消息。

然后，如果一切正常，请添加：

<强>动画

$("selector").fadeIn(slow);

如果你想用jQuery做动画。 :)动画本身是你不得不担心的最后一件事。：）

Answer 2

概括地说：

创建一个返回MySQL查询结果的PHP页面。
定期load()该页面包含来自包含页面的Javascript。
如果发现差异，请更新包含元素的内容。

这是一个非常简短的概述。最初，让我们得到结果。

// results.php

$sql = "SELECT * FROM `tbl` LIMIT 10 ORDER BY date_created DESC";

if(!$query = mysql_query($sql))
  trigger_error(mysql_error());

while($result = mysql_fetch_assoc($query))
   print_r($result);

然后制作一个页面以显示它们。

// index.html

<script type="text/javascript">

function loadResults() {
  $('#results').fadeTo('fast' , 0).load('results.php').fadeTo('fast' , 1);
}

$(document).ready(function() {

   loadResults();
   var interval = self.setInterval(loadResults(), 10000);

});

</script>

<div id="results"></div>

未测试。

Answer 3

除非使用jQuery模板和JSON，否则我会在这里抛出桨，尽管这是Dae的类似解决方案。我自己不使用php，但使用json_encode（）

创建JSON似乎并不太难

jsFiddle Example

如何为自动更新的mysql查询结果设置动画？

3 个答案: