2011-04-01 64 views
2

基本上,我将如何使用jquery动画自动更新mysql查询结果?我希望它看起来像是一个新闻动画,当它添加的结果是动画和滑落的?这将是多么难以实现,我会用什么来做到这一点?我将如何动画自动更新mysql查询结果?

感谢,

卡梅伦

回答

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获取数据库中的旧消息。

然后,如果一切正常,加上:

ANIMATION

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

如果你想要做的jQuery的动画。 :)动画本身是你必须担心的最后一件事。 :)

1

广:

  • 创建返回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> 

未经测试。

1

我会在这里扔我的桨,虽然这是一个类似的解决方案,除了使用jQuery模板和JSON。我不用php自己工作,但创建JSON似乎并不困难与json_encode()

jsFiddle Example