Question

我坚持上大学的项目，我一直在做一个小时间的微博，这可能看起来很傻但我不知道如何在不杀死我的月带宽的情况下自动刷新Feed，这里是代码我正在使用atm，

Data.php

<?php 
// connect to the database
require_once 'script/login.php';

//show results
$query = "SELECT post, PID, fbpic, fbname, fblink, post_date, DATE_FORMAT(post_date, 'Posted on %D %M %Y at %H:%i') AS pd FROM `posts` WHERE 1\n"
    . "ORDER BY `post_date` DESC LIMIT 0, 30 ";
$result = @mysql_query ($query);

if ($result) { //If it ran ok display the records
echo '<div id="feed">';
    while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
        echo '<a name="' . $row['PID'] . '"></a><div id="postsint"><a target="_blank" href="http://www.facebook.com/' . $row['fblink'] . '"><img id="dp" title="' . $row['fbname'] . '" src="https://graph.facebook.com/' . $row['fbpic'] . '/picture"/></a><div id="posttext">' . base64_decode($row['post']) . '<blockquote>' . $row['pd'] . '</blockquote><a href="https://www.facebook.com/dialog/feed?app_id=505747259483458&link=http://www.wisp-r.com/share.php?id=' . $row['PID'] . '&picture=http://www.wisp-r.com/images/app-icon.png&name=Wispr by ' . $row['fbname'] . '&caption=' . $row['pd'] . '&description=' . htmlspecialchars(base64_decode($row['post']), ENT_QUOTES) . '&redirect_uri=http://www.wisp-r.com/share.php?id=' . $row['PID'] . '">Share</a></div></div><br />';
    };
echo '</div>';
mysql_free_result ($result);
} else { //if it did not run ok
echo '<h2 id="error">Wisprs could not be retrieved. We apologise for any inconvienience.</h2>'; //public message
echo '<p id="error">' . mysql_error() . '<br /><br /> Query: ' . $query . '</p>'; //debugging message
}
mysql_close(); // Close database connection

?>

content.php

<div id="postlist"> FEED GOES HERE.</div>

所有我想做的就是每2秒检查一次更新，如果有更新，请在#postlist中显示

这是一个为期3周的斗争，我不知道任何JavaScript，这让我烦恼，我只是想完成这个项目，所以我可以去大学，也许自己学会这样做= /

提前干杯。

PS - 我只是猜测它是Ajax，但我的导师推荐这个网站，如果我遇到问题就得到答案

Answer 1

希望你被允许使用jQuery。

添加到content.php：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

function getFeed(){
    $.post('Data.php',function(data){
        $("#postlist").html(data);
    });
    setTimeout("getFeed();",2000);
}

window.onload = getFeed();

</script>

在页面加载时调用getFeed（），然后每2000毫秒调用一次，并将从Data.php接收的数据附加到postlist元素中。

这是强制它，使它不断删除postlist div中的旧html并每2秒创建所有新的html。如果您有要加载的图像，则需要更复杂的解决方案。

Answer 2

如果您使用KnockoutJS和jQuery，这可能是一个很好的起点：

<强> content.php

<script type="text/javascript">
    $(function() {
        // Define our view model that we will feed to KnockoutJS.
        var viewModel = {
            posts: []
        };

        // We'll use this variable to keep track of the last post we
        // received. When we send our GET request, our php script will be
        // able to see $_GET['last_post_date'] and only return the posts
        // that come after that.
        var last_post_date = null;

        // This is the function that will get called every 2 seconds to
        // load new data.
        var getData = function() {
            $.ajax({
                url: "/data.php",
                data: {
                    last_post_date: last_post_date
                }
            }).done( function( data ) {
                // We'll assume data.php will give us a JSON object that looks
                // like: { posts: [] }

                // Append the new posts to the end of our 'posts' array in our
                // view model.
                viewModel.posts.concat( data.posts );

                // Tell KnockoutJS to update the html.
                ko.applyBindings( viewModel );

                // Store the date of the last post to use in our next ajax call.
                last_post_date = viewModel.posts[ viewModel.posts.length - 1 ].post_date;
            });

            // In 2 seconds, call this function again.
            setTimeout( getData, 2000 );
        };

        // grab the first set of posts and start looping
        getData();
    });
</script>

<!-- We're telling KnockoutJS that for each 'row' in our 'posts' array, apply
the template named 'row-template'. -->
<div id="postlist"
     data-bind="template: { name: 'row-template', foreach: posts }"></div>

<!-- This is the KnockoutJS template that we referenced earlier. Of course,
you don't have to use KnockoutJS to do this. There are plenty of other ways
to do this. Do keep in mind that you'll minimize your bandwidth usage if you
send JSON and use an HTML template rather than loading the same HTML over
and over again. -->
<script type="text/html" id="row-template">
    <a data-bind="attr: {name: PID}"></a>
    <div id="postsint">
        <a target="_blank" data-bind="
           attr: {
               href: 'http://www.facebook.com/' + fblink
           }
        ">
            <img id="dp" data-bind="
                 attr: {
                     title: fbname,
                     src: 'https://graph.facebook.com/' + fbpic + '/picture'
                 }
            " />
        </a>
        <div id="posttext">
            <!--ko text: post--><!--/ko-->
            <blockquote data-bind="text: pd"></blockquote>
            <a data-bind="
               attr: {
                 href: 'https://www.facebook.com/dialog/feed?' +
                   'app_id=505747259483458&amp;' +
                   'link=http://www.wisp-r.com/share.php?' +
                   'id=' + PID + '&amp;' +
                   'picture=http://www.wisp-r.com/images/app-icon.png&amp;' +
                   'name=Wispr by ' + fbname + '&amp;' +
                   'caption=' + pd + '&amp;' +
                   'description=' + post + '&amp;' +
                   'redirect_uri=http://www.wisp-r.com/share.php?id=' + PID
               }
            ">
                Share
            </a>
        </div>
    </div>
    <br />
</script>

<强> data.php

<?php

// ... do sql stuff ...
// Remember to add a WHERE statement to filter out posts that are earlier than
// or equal to $_GET['last_post_date'].

$posts = array();
if ( $result ) {
    while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
        array_push( $posts, $row );
    }
}
echo json_encode( array( 'posts' => $posts ) );

AJAX PHP MicroBlog更新源

2 个答案: