我已經把一個jQuery腳本輸入註釋時,它關係到一個數據庫,並拉動結果返回,並將其顯示在頁面上。這個效果很好,但是我需要一個只有註釋的獨立頁面,它每5秒自動刷新一次結果(而不是單擊瀏覽器上的刷新)。我還想要的是對FadeIn的評論。我試圖用我在網上找到的資源做到這一點,但其中大多數似乎不斷複製我的內容以及令人耳目一新。刷新評論部分
你能幫忙嗎?
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 ')");
?>
你嘗試過這麼遠嗎?你期望什麼?什麼沒有按照你的預期工作? – hakre
你肯定會需要一個時間戳來檢查新的評論。 –
你想在Facebook上發表評論嗎? –