ajax应用-无刷新留言
ajax应用-无刷新留言，早期的源代码
代码如下：
index.html：
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”com.css”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” src=”jquery.js”></script>
<title>无刷新留言</title>
</head>
<body>
<div id=”content”>
<h2>内容标题</h2>
<p>内容主题</p>
</div>
<div id=”comments”>
<h2>留言列表</h2>
</div>
<div id=”leaveComment”>
<h2>请留言</h2>
<div><label>姓名</label><input type=”text”></div>
<div><label>留言</label><textarea cols=”10″ rows=”5″></textarea></div>
<button id=”add”>提交</button>
</div>
</body>
</html>
<script language=”javascript”>
//显示，注意getJSON存在数据缓存的问题，通过加一个时间戳t=”+new Date()解决。
$(function() {
$.getJSON(“comments.php?t=”+new Date(), function(data) {
for (var x = 0; x < data.length; x++) {
var div = $(“<div>”).addClass(“row”).appendTo(“#comments”);
$(“<label>”).text(data[x].name).appendTo(div);
$(“<div>”).addClass(“comment”).text(data[x].comment).appendTo(div);
}
});
});
//提交
$(function() {
$(“#add”).click(function(){
var ajaxOpts = {
type: “post”,
url: “addComment.php”,
data: “&author=” + $(“#leaveComment”).find(“input”).val() + “&comment=” + $(“#leaveComment”).find(“textarea”).val(),
success: function(data) {
var div = $(“<div>”).addClass(“row”).appendTo(“#comments”);
$(“<label>”).text($(“#leaveComment”).find(“input”).val()).appendTo(div);
$(“<div>”).addClass(“comment”).text($(“#leaveComment”).find(“textarea”).val()).appendTo(div);
}
};
$.ajax(ajaxOpts);
});
});
</script>
addComment.php：
<?php
//留言，插入数据库
$host = “localhost”;
$user = “root”;
$password = “123456″;
$database = “test”;
$con = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $con);
$name = mysql_real_escape_string($_POST["author"]);
$comment = mysql_real_escape_string($_POST["comment"]);
mysql_query(“INSERT INTO comment(name,comment) VALUES(‘$name ‘,’$comment’)”);
?>
comments.php：
<?php
$host = “localhost”;
$user = “root”;
$password = “123456″;
$database = “test”;
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
$query = mysql_query(“SELECT * FROM comment”);
$comments=array();
while($row = mysql_fetch_array($query))
{
$comments[]=$row;
}
$response = json_encode($comments);
echo $response;
?>
com.css：
body { font-family:verdana; font-size:11px; color:#ffffff; }
#content {
width:400px; height:75px; border:1px solid #000000; margin:0 auto 1px; background-color:#575454;
}
#comments {
width:400px; border:1px solid #000000; margin:0 auto 1px; background-color:#575454;
}
.comment {
background-color:#d4d7d6; border:1px solid #000000;padding:5px 0 5px 5px; color:#000000;
}
#leaveComment {
width:400px; border:3px solid #000000; margin:0 auto; overflow:hidden; position:relative; background-color:#575454;
}
.row { padding-left:5px; margin-bottom:5px; clear:both; overflow:hidden; }
.row label {
width:100px; text-align:right; margin-right:5px; display:block;
float:left; font-weight:bold; padding-top:5px;
}
.row input, .row textarea, .row div {
width:280px; display:block; float:left;
}
#add {
position:absolute; bottom:5px; left:60px; font-weight:bold;
font-size:10px;
}
comment.sql如下:
SET FOREIGN_KEY_CHECKS=0;
– —————————-
– Table structure for `comment`
– —————————-
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) CHARACTER SET utf8 DEFAULT NULL,
`comment` varchar(50) CHARACTER SET utf8 NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
– —————————-
– Records of comment
– —————————-
INSERT INTO `comment` VALUES (’11′, ‘liyingbo ‘, ‘test-ajax’);
INSERT INTO `comment` VALUES (’12′, ‘liyingbo ‘, ‘go’);