PHP 개발 포스트 코멘트 기능 튜토리얼 jQuery
전체 index.html 페이지 만들기
먼저 주석 목록을 읽는 기능을 살펴보겠습니다. 페이지가 로드되면 getJSON 메서드를 사용하여 서버 측 PHP에서 생성된 JSON 데이터를 읽고 사용자에게 표시합니다.
$(function(){
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array) ) ){
var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>" [ "추가 시간"]+"";
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array) ) ){
var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>" [ "추가 시간"]+"";
생성된 JSON 데이터에는 여러 개의 주석이 포함되어 있으므로 $.each 루프를 통해 JSON 데이터를 읽어야 함을 알 수 있습니다. 물론 for 루프를 사용할 수도 있지만 저는 jQuery의 $.each 루프를 사용하는 것을 선호합니다.
댓글 기능의 프론트엔드 코드를 살펴보겠습니다.
$("#add").click(function(){
var user = $("#user").val();
var txt = $("#txt").val();
$.ajax({
유형: "POST",
url: "comment.php",
데이터: "user="+user+"&txt="+txt,
성공: 함수(msg){
If(msg= = 1) {s var str = "& lt; p & gt; & lt; Strong & gt;"+user+"& lt;/strong & gt;:"+txt+"& lt; span & gt; just & lt ;/span & lt;/// p & gt; ";
댓글 .appnd (str);
$ ("#Message"). Show ().html ("성공적인 게시!"). );
}) ;
CSS 페이지와 결합된 이전 HTML을 변경하겠습니다.
index.htm 전체 코드 var user = $("#user").val();
var txt = $("#txt").val();
$.ajax({
유형: "POST",
url: "comment.php",
데이터: "user="+user+"&txt="+txt,
성공: 함수(msg){
If(msg= = 1) {s var str = "& lt; p & gt; & lt; Strong & gt;"+user+"& lt;/strong & gt;:"+txt+"& lt; span & gt; just & lt ;/span & lt;/// p & gt; ";
댓글 .appnd (str);
$ ("#Message"). Show ().html ("성공적인 게시!"). );
}) ;
CSS 페이지와 결합된 이전 HTML을 변경하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表评论</title>
<style type="text/css">
.demo{
width:500px;
margin: 0 auto;
}
h3{
font-size:18px
}
#comments{
margin:10px auto
}
#post{
margin-top:10px
}
#comments p,#post p{
line-height:30px
}
#comments p span{
margin:4px; color:#999
}
#message{
position:relative;
display:none;
width:100px;
padding:4px;
margin-top:-100px;
margin-left:30px;
background: #ff0000;
color: #c286ff;
z-index:1001
}
</style>
<script src="//cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){
var txt = "<p><strong>"+array["user"]+"</strong>："+array["comment"]+"<span>"+array["addtime"]+"</span></p>";
comments.append(txt);
});
});
$("#add").click(function(){
var user = $("#user").val();
var txt = $("#txt").val();
$.ajax({
type: "POST",
url: "comment.php",
data: "user="+user+"&txt="+txt,
success: function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong>："+txt+"<span>刚刚</span></p>";
comments.append(str);
$("#message").show().html("发表成功！").fadeOut(1000);
$("#txt").attr("value","");
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="comments">
<h3>评论列表</h3>
</div>
<div id="post">
<h3>发表评论</h3>
<p>昵称：</p>
<p><input type="text" class="input" id="user" /></p>
<p>评论内容：</p>
<p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
<p><input type="submit" value="发表" id="add" /></p>
<div id="message"></div>
</div>
</div>
</body>
</html>'server.php' 페이지에서 댓글 읽기가 처리되는 것을 볼 수 있습니다 댓글 저장 데이터베이스는 'comment.php'에 있습니다. 페이지 처리
PHP 페이지를 작성해 보겠습니다<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表评论</title>
<style type="text/css">
.demo{
width:500px;
margin: 0 auto;
}
h3{
font-size:18px
}
#comments{
margin:10px auto
}
#post{
margin-top:10px
}
#comments p,#post p{
line-height:30px
}
#comments p span{
margin:4px; color:#999
}
#message{
position:relative;
display:none;
width:100px;
padding:4px;
margin-top:-100px;
margin-left:30px;
background: #ff0000;
color: #c286ff;
z-index:1001
}
</style>
<script src="//cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){
var txt = "<p><strong>"+array["user"]+"</strong>："+array["comment"]+"<span>"+array["addtime"]+"</span></p>";
comments.append(txt);
});
});
$("#add").click(function(){
var user = $("#user").val();
var txt = $("#txt").val();
$.ajax({
type: "POST",
url: "comment.php",
data: "user="+user+"&txt="+txt,
success: function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong>："+txt+"<span>刚刚</span></p>";
comments.append(str);
$("#message").show().html("发表成功！").fadeOut(1000);
$("#txt").attr("value","");
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="comments">
<h3>评论列表</h3>
</div>
<div id="post">
<h3>发表评论</h3>
<p>昵称：</p>
<p><input type="text" class="input" id="user" /></p>
<p>评论内容：</p>
<p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
<p><input type="submit" value="发表" id="add" /></p>
<div id="message"></div>
</div>
</div>
</body>
</html>
없음