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>" [ "추가 시간"]+"

생성된 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 전체 코드

<!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>

제출하다 코드 재설정

자동운전

이전 섹션 다음 섹션

튜토리얼 목록

도움을 받다