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>" [ "addtime"]+"</span></p>";
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array) ) ){
var txt = "<p><strong>"+array["user"]+"</strong>："+array["comment"]+"<span>" [ "addtime"]+"</span></p>";
生成された JSON データには複数のコメントがあるため、$.each ループを通じて JSON データを読み取る必要があることがわかります。もちろん for ループを使用することもできますが、私は jQuery の $.each ループを使用することを好みます。
コメント関数のフロントエンドコードを見てみましょう。
$("#add").click(function(){
var user = $("#user").val();
var txt = $("#txt").val();
$ .ajax（{"post"、
url： "comment.php"、if（msg = 1）{ments .append（str）;
};以前の HTML を変更します CSS ページと組み合わせる
index.htm 完全なコード
コメントの読み取りが 'server.php' ページで処理されることがわかります
データベースへのコメントの保存は ' にありますcomment.php' ページ処理
PHP ページを書いてみましょうvar user = $("#user").val();
var txt = $("#txt").val();
$ .ajax（{"post"、
url： "comment.php"、if（msg = 1）{ments .append（str）;
};以前の HTML を変更します CSS ページと組み合わせる
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' ページ処理
||
<!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>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
