将jQuery淡入或滚动效果应用于Facebook，如新闻源

Question

我有一个使用PHP，MySQL和jQuery开发的新闻源。 新闻源通过每5秒获取新内容来完成它的工作。 但是，这是通过“刷新”完整内容来完成的。 我只想在新闻Feed中添加任何新内容。 我希望使用淡入或滚动效果（jQuery）来实现此目的。 已加载的项目应保留在Feed中，不得使用任何新内容重新加载。 我怎样才能做到这一点？

这是我的2页和代码。

feed.php

 <body >

    <script>
    window.setInterval(function(){
      refreshNews();
    }, 5000);
    </script>




    <div id="news"></div>


    <script>

        function refreshNews()
        {
            $("#news").fadeOut().load("ajax.php", function( response, status, xhr){

                if (status == "error"){

                }
                else
                {
                    $(this).fadeIn();
                }
            });
        }
    </script>
    </body>
    </html>

ajax.php

<?php require_once('../../Connections/f12_database_connect.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_f12_database_connect, $f12_database_connect);
$query_newsfeed_q = "SELECT * FROM newsfeed ORDER BY pk DESC";
$newsfeed_q = mysql_query($query_newsfeed_q, $f12_database_connect) or die(mysql_error());
$row_newsfeed_q = mysql_fetch_assoc($newsfeed_q);
$totalRows_newsfeed_q = mysql_num_rows($newsfeed_q);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<table border="1">
  <tr>
    <td>pk</td>
    <td>title</td>
    <td>content</td>
  </tr>
  <?php do { ?>
    <tr>
      <td><?php echo $row_newsfeed_q['pk']; ?></td>
      <td><?php echo $row_newsfeed_q['title']; ?></td>
      <td><?php echo $row_newsfeed_q['content']; ?></td>
    </tr>
    <?php } while ($row_newsfeed_q = mysql_fetch_assoc($newsfeed_q)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($newsfeed_q);
?>

Answer 1

我不太确定你是如何进行这种设置的，但它似乎并不正确：

创建一个只包含php代码的文件，这个文件将返回一个包含最新消息的json对象; 您将解析客户端上的对象。 以下是此php文件的响应示例。

newsFeed.php

<php
     $array_with_news = array('news1' => array('pk' => 'pk1', 'title' => 'title1', 'content' => 'title2'), 'news2' => array('pk' => 'pk2', 'title' => 'title2', 'content' => 'content2'));

     echo json_encode($array_with_news);
?>

第二个文件将包含feed.php和其余的ajax.php。 当您执行ajax调用更新的新闻时，新创建的php文件将使用您将解析的json对象进行响应，并使用其最新内容设置表的值。

的index.php

<html>
<head>
<script type="text\javascript">

window.setInterval(function(){
  updateNews();
}, 5000);


function updateNews(){
 var scope = this;
 $.getJSON('newsFeed.php*', function(data) {
  //data will contain the news information
  $.each(data, function(index, value) {
   this.addNewsRow(value);
  });

 });
}

function addNewsRow(newsData){
 //this function will add html content 
 var pk = newsData.pk, title = newsData.title, content = newsData.content;
 $('#news').append(pk + ' ' + title + ' ' + content);
}
</script>
</head>
<body>
 <div id="news"></div>
</body>
</html>

我没有对此进行测试，但这是它应该如何工作的总体思路。 index.php是用户将要去的地方，我们将执行updateNews的每个时间间隔，这个函数负责通过AJAX调用newsFeed.php。 newsFeed.php负责查询数据库并使用包含所有新闻信息的json对象进行响应。 一旦updateNews（）从newsFeed.php获得响应，它将遍历JSON对象并将响应的内容添加到div。

希望有道理。

Answer 2

你总是可以通过停止滥用innerHTML来开始。

相反，您应该从服务器发送JSON作为重播，然后手动“构建”DOM以获取新项目。 为了方便起见，我建议除了有关新闻的数据外，还要发送另一个参数： 版本号 。

数据流如下：

你没有关闭version号（第一次运行）：
- 发送请求到ajax.php并接收JSON
- 提取version号并存储在本地闭包中
- 循环遍历所有数据项，并生成新闻源（不使用innerHTML）
价值version 不 undefined ：
- 您从ajax.php?version=XXXX请求数据并接收JSON：
  1. 如果JSON为空{} ，则没有新的Feed。 没做什么
  2. 如果JSON包含数据，则：
    - 您将version更新为从服务器收到的最新version
    - 循环遍历所有数据并添加新闻Feed项

多数民众赞成我将如何做到这一点。

将jQuery淡入或滚动效果应用于Facebook，如新闻源

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-11-19 16:55:13

解决方案2
1 2011-12-10 13:18:01

将jQuery淡入或滚动效果应用于Facebook，如新闻源

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-11-19 16:55:13

解决方案2 1 2011-12-10 13:18:01

解决方案1
1 已采纳 2011-11-19 16:55:13

解决方案2
1 2011-12-10 13:18:01