刷新评论部分

时间：2011-06-24 08:44:17

标签： php javascript jquery json

我已经整理了一个JQuery脚本，在输入注释时，它会转到数据库并将结果拉回并在页面上显示。这很好用，但我需要一个单独的页面，只需要注释，每5秒自动刷新一次结果（而不是点击浏览器上的刷新）。我还想要的是对FadeIn的评论。我尝试使用我在网上找到的资源来做到这一点，但是大多数资源似乎都在不断复制我的内容以及更新。

你能帮忙吗？ enter image description here

Comments.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="comments.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live Comments</title>
</head>
<body>
<div id="leaveComment">
  <h2>Leave a Comment</h2>
  <div class="row">
    <label>Your Name:</label>
    <input type="text">
  </div>
  <div class="row">
    <label>Comment:</label>
    <textarea cols="10" rows="5"></textarea>
  </div>
  <button id="add">Add</button>
</div>
<div id="comments">
  <h2>Live Comments</h2>
</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript">
            $(function() {

                //retrieve comments to display on page
                $.getJSON("comments.php?jsoncallback=?", function(data) {

                    //loop through all items in the JSON array
                    for (var x = 0; x < data.length; x++) {

                        //create a container for each comment
                        var div = $("<div>").addClass("row").appendTo("#comments");

                        //add author name and comment to container
                        $("<label>").text(data[x].name).appendTo(div);
                        $("<div>").addClass("comment").text(data[x].comment).appendTo(div);
                    }
                }); 
                //add click handler for button
                $("#add").click(function() {

                    //define ajax config object
                    var ajaxOpts = {
                        type: "post",
                        url: "addComment.php",
                        data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val(),
                        success: function(data) {

                            //create a container for the new comment
                            var div = $("<div>").addClass("row").appendTo("#comments"); 

                            //add author name and comment to container
                            $("<label>").text($("#leaveComment").find("input").val()).appendTo(div);
                            $("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow");

                            //empty inputs
                            $("#leaveComment").find("input").val("");
                            $("#leaveComment").find("textarea").val("");
                        }
                    };

                    $.ajax(ajaxOpts);

                });     
            });     
        </script>
</body>
</html>

Moderator.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="comments.css">
</head>
<body>
<div id="comments">
  <h2>Live Comments</h2>
</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript">
            $(function() {

                //retrieve comments to display on page
                $.getJSON("comments.php?jsoncallback=?", function(data) {

                    //loop through all items in the JSON array
                    for (var x = 0; x < data.length; x++) {

                        //create a container for each comment
                        var div = $("<div>").addClass("row").appendTo("#comments");

                        //add author name and comment to container
                        $("<label>").text(data[x].name).appendTo(div);
                        $("<div>").addClass("comment").text(data[x].comment).appendTo(div);
                    }
                }); 
                //add click handler for button
                $("#add").click(function() {

                    //define ajax config object
                    var ajaxOpts = {
                        type: "post",
                        url: "addComment.php",
                        data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val(),
                        success: function(data) {

                            //create a container for the new comment
                            var div = $("<div>").addClass("row").appendTo("#comments"); 

                            //add author name and comment to container
                            $("<label>").text($("#leaveComment").find("input").val()).appendTo(div);
                            $("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow");

                            //empty inputs
                            $("#leaveComment").find("input").val("");
                            $("#leaveComment").find("textarea").val("");
                        }
                    };

                    $.ajax(ajaxOpts);

                });     
            });     
        </script>
</body>
</html>

的comments.php 

<?php

    //db connection detils
    $host = "localhost";
  $user = "CommentsDB";
  $password = "password";
  $database = "comments";

    //make connection
  $server = mysql_connect($host, $user, $password);
  $connection = mysql_select_db($database, $server);

    //query the database
  $query = mysql_query("SELECT * FROM comments");

    //loop through and return results
  for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
        $row = mysql_fetch_assoc($query);

        $comments[$x] = array("name" => $row["name"], "comment" => $row["comment"]);        
    }

    //echo JSON to page
    $response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")";
    echo $response;

?>

addComments.php 

<?php

  //db connection detils
  $host = "localhost";
  $user = "CommentsDB";
  $password = "password";
  $database = "comments";

  //make connection
  $server = mysql_connect($host, $user, $password);
  $connection = mysql_select_db($database, $server);

  //get POST data
  $name = mysql_real_escape_string($_POST["author"]);
  $comment = mysql_real_escape_string($_POST["comment"]);

  //add new comment to database
  mysql_query("INSERT INTO comments VALUES(' $name ',' $comment ')");

?>

2 个答案:

答案 0 :(得分：2)

  

QUOTE：每5秒自动刷新一次结果

使用此代码。

function checkForComments() {}

$(document).ready(function () {
  //Wait 5 seconds then call checkForComments();
  setInterval("checkForComments()", 5000);
});

5000这里的时间以毫秒为单位，相当于5秒。

  

引用：，但大多数人似乎都会继续复制我的内容以及刷新内容。

从您的问题中不清楚comments.php输出究竟是什么。如果它输出数据库中的所有注释，则最佳选项是保留已发布的数组到页面。只需在JavaScript中编写一个函数 检查，如果该数组中存在特定ID ，如果不存在则追加强>

  

引用：我还希望对FadeIn的评论

按照这个问题 Making my ajax updated div fade in

<强>已更新

JavaScript加载评论 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    //stores the comment IDs
    var comments=new Array();
    var count=1 ;
    function checkForComments() {
        $.getJSON("comments.php", addComments);
    }
    function addComments(data) {
        //loop through all items in the JSON array
        for (var x = 0; x < data.length; x++) {
            alert(data[x].id);
            if(jQuery.inArray(data[x].id, comments)==-1){
                comments[count] = data[x].id;
                //create a container for each comment
                var div = $("<div>").addClass("row").appendTo("#comments");
                //add author name and comment to container
                $("<label>").text(data[x].name).appendTo(div);
                $("<div>").addClass("comment").text(data[x].comment).appendTo(div);
                count++;
            }
        }
    }


    $(document).ready(function () {
        checkForComments();
        setInterval("checkForComments()", 5000);
    });
</script>

my comments.php 

<?php
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);

//query the database
$query = mysql_query("SELECT * FROM comments");

//loop through and return results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
    $row = mysql_fetch_assoc($query);
    //I have added ID here, 
    $comments[$x] = array("id" => $row["id"], "name" => $row["name"], "comment"
        => $row["comment"]);
}

echo json_encode($comments);
?>

用于评论的SQL表 

CREATE TABLE IF NOT EXISTS `comments` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL,
  `comment` text NOT NULL,
  PRIMARY KEY (`id`)
)

答案 1 :(得分：0)

您有两种选择：在添加append()新内容后，删除旧内容。

或者，设置一个“占位符”元素，并在其上使用.html（） - 这样就可以替换旧内容，而不是添加更多内容。

相关问题
最新问题