在上一篇隨筆中已經將如何發布動態呈現了,那么現在來看一下剩下的評論動態、回復評論、刪除動態和評論功能,這幾個功能會有點繞~~~
一、思路如下:
(1)你發表動態之后,會有人評論這一條動態,當評論之后,你也會回復該評論;(此處評論要單獨一張表,回復也要單獨一張表)
(2)刪除動態:會將動態連同評論、回復全部刪除;刪除評論:只會刪除該條評論
二、在寫代碼之前,我還是想把流程說一遍:
(1)發表動態---評論---回復---再回復
(2)將上邊的流程細化,我先在紙上寫出,再上傳,碼字不能表達清楚(注意的是,我想要的功能的實現,并不是一模一樣的哈)
三、還是先將代碼分塊解釋,最后將主頁面代碼完全附上(含上一篇)
在上一篇中已經實現發布動態、彈出評論框,那么現在接著向下走:
分別看一下qqfriends,qqdongtai,qqpinglun,qqhuifu表,這是初始狀態:
先以用戶李四登錄,由數據庫qqfriends表中知道,李四的好友是zhangsan, 和zhaoliu,那么他的空間中顯示的好友動態如下:
與上一篇相比,在這一篇中,誰登錄的我用中文顯示的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php session_start(); $uid = "" ; if ( empty ( $_session [ "uid" ])) { header( "location:login.php" ); exit ; } $uid = $_session [ "uid" ]; require "../db.class.php" ; $db = new db(); $sql = "select name from qqusers where uid='{$uid}'" ; $name = $db ->strquery( $sql ); echo "歡迎:" . "<span class='qid' yh='{$uid}'>{$name}</span>" ; ?> |
第一步:評論
1、評論張三的動態,點擊“確定”后,就是第二張圖了~
2、并將評論的內容寫進數據庫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//定義空字符串,容納評論的id var code= "" ; $( ".pl" ).click( function (){ code = $(this).attr( "code" ); //將評論的id重新賦值 }) //將評論寫進數據庫 $( "#tjpl" ).click( function (){ var plnr = $( ".pldt" ).val(); var plid = code; //取發動態的id $.ajax({ url: "pl-cl.php" , data:{plnr:plnr,plid:plid}, type: "post" , datatype: "text" , success: function (data){ alert( "評論成功!" ); window.location.href= "main.php" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ; } }); }) |
pl-cl.php頁面<br><br>
1
2
3
4
5
6
7
8
9
10
11
|
<?php require "../db.class.php" ; $db = new db(); session_start(); $uid = $_session [ "uid" ]; $plnr = $_post [ "plnr" ]; $dtid = $_post [ "plid" ]; $time = date ( "y-m-d h:i:s" , time()); $sql = "insert into qqpinglun values ('','{$dtid}','{$uid}','{$plnr}','{$time}')" ; $db ->query( $sql ,0); ?> |
查看qqpinglun表中是不是多了這一條 “為什么開心呢?”:
3、讀取評論內容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!--讀取評論內容--> <div id= "dqpl" > <?php $sql = "select * from qqpinglun" ; $arr = $db ->query( $sql ); foreach ( $arr as $v ) { $sql = "select * from qqdongtai where dtid='{$v[1]}'" ; $arr2 = $db ->query( $sql ); foreach ( $arr2 as $m ) { //取發動態的姓名 $sql = "select name from qqusers where uid='{$v[2]}'" ; $name = $db ->strquery( $sql ); //若果是登錄者評論則顯示“我” if ( $v [2]== $uid ) { $name = "我" ; } //獲取被評論者的姓名 $sql = "select name from qqusers where uid=(select uid from qqdongtai where dtid='{$v[1]}')" ; $bpl = $db ->strquery( $sql ); echo "<div class = 'a' ><span class = 'xm' >{ $name }</span>評論<span class = 'xm' >{ $bpl }</span>的動態:{ $m [2]}<div> <div class = 'b' >{ $v [3]}</div> <div class = 'c' >發表評論時間:{ $v [4]}</div> <div class = 'd' ><button class = 'btn btn-primary hf' ids = '{$v[0]}' >回復 </button><span><a href= 'scpl-cl.php?code={$v[0]}' >刪除評論</a></span></div>"; } } ?> </div> |
第二步:回復
1、回復剛剛的評論:
2、將回復內容寫進數據庫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//定義空字符串,容納回復評論的id var ids= "" ; $( ".hf" ).click( function (){ ids = $(this).attr( "ids" ); //將評論的id重新賦值 // alert((ids)); $( '#mm' ).modal( 'show' ); }) //將回復評論寫進數據庫 $( "#tjhf" ).click( function (){ var hfnr = $( ".hfpl" ).val(); // alert(hfnr); // alert(ids); $.ajax({ url: "hf-cl.php" , data:{hfnr:hfnr,ids:ids}, type: "post" , datatype: "text" , success: function (data){ alert( "回復成功!" ); window.location.href= "main.php" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ; } }); }) |
hf-cl.php頁面
1
2
3
4
5
6
7
8
9
10
|
<?phprequire "../db.class.php" ; $db = new db(); session_start(); $uid = $_session [ "uid" ]; $hfnr = $_post [ "hfnr" ]; $cid = $_post [ "ids" ]; $time = date ( "y-m-d h:i:s" , time()); $sql = "insert into qqhuifu values ('','{$cid}','{$uid}','{$hfnr}','{$time}')" ; $db ->query( $sql ,0); ?> |
查看qqhuifu表,是不是多了一行呢?
3、將回復內容讀出:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<div id= "dqhf" > <!--取一次回復--> <?php $sql = "select * from qqhuifu where cid in (select cid from qqpinglun)" ; $arr = $db ->query( $sql ); foreach ( $arr as $a ) { $sql = "select * from qqpinglun where cid='{$a[1]}'" ; $arr2 = $db ->query( $sql ); foreach ( $arr2 as $n ) { //取評論動態的姓名 $sql = "select name from qqusers where uid='{$a[2]}'" ; $name = $db ->strquery( $sql ); //若果是登錄者評論則顯示“我” if ( $a [2]== $uid ) { $name = "我" ; } //獲取被回復評論的姓名 $sql = "select name from qqusers where uid=(select uid from qqpinglun where cid='{$a[1]}')" ; $bpl = $db ->strquery( $sql ); echo "<div class = 'a' ><span class = 'xm' >{ $name }</span>回復<span class = 'xm' >{ $bpl }</span>的評論:{ $n [3]}<div> <div class = 'b' >{ $a [3]}</div> <div class = 'c' >回復時間:{ $a [4]}</div> <div class = 'd' ><button class = 'btn btn-primary hf' ids = '{$a[0]}' >回復 </button><span><a href= 'schf-cl.php?code={$a[0]}' >刪除回復</a></span></div>"; } } ?> </div> |
回復內容已經顯示了:
第三步:刪除
1、刪除動態:(含評論和回復)
scdt-cl.php
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php $code = $_get [ "code" ]; require "../db.class.php" ; $db = new db(); $sql = "delete from qqdongtai where dtid='{$code}'" ; $db ->query( $sql ,0); $sql2 = "delete from qqpinglun where dtid='{$code}'" ; $db ->query( $sql2 ,0); $sql3 = "delete from qqhuifu where cid=(select cid from qqpinglun where dtid='{$code}')" ; $db ->query( $sql3 ,0); header( "location:main.php" ); ?> |
2、刪除評論:(含回復)
scpl-cl.php
1
2
3
4
5
6
7
8
9
10
|
<?php $code = $_get [ "code" ]; require "../db.class.php" ; $db = new db(); $sql2 = "delete from qqpinglun where cid='{$code}'" ; $db ->query( $sql2 ,0); $sql3 = "delete from qqhuifu where cid='{$code}'" ; $db ->query( $sql3 ,0); header( "location:main.php" ); ?> |
3、刪除回復:(只自己)
schf-cl.php
1
2
3
4
5
6
7
8
9
10
|
<?php $code = $_get [ "code" ]; require "../db.class.php" ; $db = new db(); $sql2 = "delete from qqpinglun where cid='{$code}'" ; $db ->query( $sql2 ,0); $sql3 = "delete from qqhuifu where cid='{$code}'" ; $db ->query( $sql3 ,0); header( "location:main.php" ); ?> |
關于刪除就不依次試了~~~注意包含關系就好了
主頁面全部代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
|
<!doctype html> <html> <head> <meta charset= "utf-8" > <title></title> <!--引入bootstrap的css文件--> <link type= "text/css" rel= "stylesheet" href= "../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel= "external nofollow" /> <!--引入js包--> <script src= "../jquery-3.2.0.js" ></script> <!--引入bootstrap的js文件--> <script src= "../bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> <style> #body{ height: auto; width: 1000px; margin: 0px auto; } #xdt{ height: 200px; width:1000px; border: 1px solid cadetblue; } /*動態和評論div*/ .fdt{ position: relative; width: 1000px; } /*讀取內容div*/ #nr{ width: 1000px; } /*誰發表動態樣式*/ .a{ float: left; min-height:40px; width: 1000px; background-color: goldenrod; } /*姓名*/ .xm{ font-size: 18px; color: brown; font-weight: bold; } /*發表動態樣式內容*/ .b{ float: left; text-align: left; height:100px; line-height: 50px; width: 100%; background-color: greenyellow; } /*發表時間與回復刪除樣式*/ .c{ height:30px; width: 800px; float: left; font-size: 12px; text-align:right; background-color: gainsboro; } /*彈出模態框評論框*/ .d{ height:30px; width: 200px; float: left; font-size: 15px; text-align:center; background-color: gainsboro; } /*讀取評論div*/ #dqpl{ width: 1000px; } #dqhf { width: 1000px; } </style> </head> <body> <div id= "body" > <?php session_start(); $uid = "" ; if ( empty ( $_session [ "uid" ])) { header( "location:login.php" ); exit ; } $uid = $_session [ "uid" ]; require "../db.class.php" ; $db = new db(); $sql = "select name from qqusers where uid='{$uid}'" ; $name = $db ->strquery( $sql ); //這種方法可以取到uid。 echo "歡迎:" . "<span class='qid' yh='{$uid}'>{$name}</span>" ; ?> <!--寫動態--> <div id= "xdt" > <p>發表動態:</p> <textarea cols= "100px" rows= "5px" name= "xdt" class = "xdt" ></textarea> <input type= "submit" value= "發表" id= "fb" /> </div> <!--動態內容結束--> <!--容納動態內容--> <div class = "fdt" > <p style= "color: brown; font-family: '微軟雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;" >朋友動態:<p> <!--讀取動態內容--> <div id= "nr" > <?php $date = date ( "y-m-d h:i:s" ); $sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}')) order by time desc" ; //echo $sql; $arr = $db ->query( $sql ); // var_dump($arr); foreach ( $arr as $v ) { $sql = "select name from qqusers where uid='{$v[1]}'" ; $name = $db ->strquery( $sql ); if ( $v [1]== $uid ) { $name = "我" ; } echo "<div class = 'a' ><span class = 'xm' >{ $name }</span>發表動態:</div> <div class = 'b' >{ $v [2]}</div> <div class = 'c' >發表動態時間:{ $v [3]}</div> <div class = 'd' ><button class = 'btn btn-primary pl' data-toggle= 'modal' data-target= '#mymodal' code = '$v[0]' >評論</button> <span><a href= 'scdt-cl.php?code={$v[0]}' >刪除動態</a></span></div>"; } ?> </div> <!--讀取評論內容--> <div id= "dqpl" > <?php $sql = "select * from qqpinglun" ; $arr = $db ->query( $sql ); foreach ( $arr as $v ) { $sql = "select * from qqdongtai where dtid='{$v[1]}'" ; $arr2 = $db ->query( $sql ); foreach ( $arr2 as $m ) { //取發動態的姓名 $sql = "select name from qqusers where uid='{$v[2]}'" ; $name = $db ->strquery( $sql ); //若果是登錄者評論則顯示“我” if ( $v [2]== $uid ) { $name = "我" ; } //獲取被評論者的姓名 $sql = "select name from qqusers where uid=(select uid from qqdongtai where dtid='{$v[1]}')" ; $bpl = $db ->strquery( $sql ); echo "<div class = 'a' ><span class = 'xm' >{ $name }</span>評論<span class = 'xm' >{ $bpl }</span>的動態:{ $m [2]}<div> <div class = 'b' >{ $v [3]}</div> <div class = 'c' >發表評論時間:{ $v [4]}</div> <div class = 'd' ><button class = 'btn btn-primary hf' ids = '{$v[0]}' >回復 </button><span><a href= 'scpl-cl.php?code={$v[0]}' >刪除評論</a></span></div>"; } } ?> </div> <!--讀取回復的內容--> <div id= "dqhf" > <?php $sql = "select * from qqhuifu where cid in (select cid from qqpinglun)" ; $arr = $db ->query( $sql ); // var_dump($arr); foreach ( $arr as $a ) { $sql = "select * from qqpinglun where cid='{$a[1]}'" ; $arr2 = $db ->query( $sql ); // var_dump($arr2); foreach ( $arr2 as $n ) { //取評論動態的姓名 $sql = "select name from qqusers where uid='{$a[2]}'" ; $name = $db ->strquery( $sql ); //若果是登錄者評論則顯示“我” if ( $a [2]== $uid ) { $name = "我" ; } //獲取被回復評論的姓名 $sql = "select name from qqusers where uid=(select uid from qqpinglun where cid='{$a[1]}')" ; $bpl = $db ->strquery( $sql ); echo "<div class = 'a' ><span class = 'xm' >{ $name }</span>回復<span class = 'xm' >{ $bpl }</span>的評論:{ $n [3]}<div> <div class = 'b' >{ $a [3]}</div> <div class = 'c' >回復時間:{ $a [4]}</div> <div class = 'd' ><button class = 'btn btn-primary hf' ids = '{$a[0]}' >回復 </button><span><a href= 'schf-cl.php?code={$a[0]}' >刪除回復</a></span></div>"; } } ?> </div> </div> <!-- 評論模態框(modal) --> <div class = "modal fade" id= "mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "mymodallabel" aria-hidden= "true" > <div class = "modal-dialog" > <div class = "modal-content" > <div class = "modal-header" > <button type= "button" class = "close" data-dismiss= "modal" aria-hidden= "true" >×</button> <h4 class = "modal-title" id= "mymodallabel" >評論</h4> </div> <textarea class = "modal-body pldt" cols= "80px" ></textarea> <div class = "modal-footer" > <button type= "button" class = "btn btn-default" data-dismiss= "modal" >關閉</button> <button type= "button" class = "btn btn-primary" id= "tjpl" >提交評論</button> </div> </div> </div> </div> <!--模態框結束--> <!-- 回復模態框(modal) --> <div class = "modal fade" id= "mm" tabindex= "-1" role= "dialog" aria-labelledby= "mymodallabel" aria-hidden= "true" > <div class = "modal-dialog" > <div class = "modal-content" > <div class = "modal-header" > <button type= "button" class = "close" data-dismiss= "modal" aria-hidden= "true" >×</button> <h4 class = "modal-title" id= "mymodallabel" >回復</h4> </div> <textarea class = "modal-body hfpl" cols= "80px" ></textarea> <div class = "modal-footer" > <button type= "button" class = "btn btn-default" data-dismiss= "modal" >關閉</button> <button type= "button" class = "btn btn-primary" id= "tjhf" >提交回復</button> </div> </div> </div> </div> <!--模態框結束--> </div> </body> </html> <script> //ajax方法:刷新頁面時將內容讀取出來,并按發表時間讀出來 // $.ajax({ // url:"sx-cl.php", // datatype:"text", // success:function(data){ // var hang = data.trim().split("|"); // var str=""; // for(var i=0;i<hang.length;i++) // { // var lie = hang[i].split("^"); // str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>發表動態:</div><div class='b'><p>"+lie[2]+"</p><div class='c'>發表動態時間:"+lie[3]+"</div>"; // str =str+"<div id='d'><button class='btn btn-primary pl' data-toggle='modal' data-target='#mymodal' code ='"+lie[0]+"'>評論</button><span><a href='del.php?code="+lie[0]+"'>刪除動態</a></span></div>"; // } // $("#nr").html(str); // //點擊“評論按鈕”實現將code值傳到模態框的“提交按鈕” // //為什么放在此處:因為ajax是異步的,如果不放在此處會加不上點擊事件 // $(".pl").click(function(){ // code = $(this).attr("code"); //將評論的id重新賦值 // }) // } // }); // //php方法: 當發表動態時,將動態內容寫進數據庫,并刷新頁面 $( "#fb" ).click( function (){ var dt= $( ".xdt" ).val(); var uid = $( ".qid" ).attr( "yh" ); $.ajax({ url: "main-cl.php" , data:{dt:dt}, type: "post" , datatype: "text" , success: function (data){ alert( "發表動態成功!" ); window.location.href= "main.php" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ; } }); }) //定義空字符串,容納評論的id var code= "" ; $( ".pl" ).click( function (){ code = $(this).attr( "code" ); //將評論的id重新賦值 }) //將評論寫進數據庫 $( "#tjpl" ).click( function (){ var plnr = $( ".pldt" ).val(); var plid = code; //取發動態的id // alert(plnr); // alert(plid); $.ajax({ url: "pl-cl.php" , data:{plnr:plnr,plid:plid}, type: "post" , datatype: "text" , success: function (data){ alert( "評論成功!" ); window.location.href= "main.php" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ; } }); }) //定義空字符串,容納回復評論的id var ids= "" ; $( ".hf" ).click( function (){ ids = $(this).attr( "ids" ); //將評論的id重新賦值 // alert((ids)); $( '#mm' ).modal( 'show' ); }) //將回復評論寫進數據庫 $( "#tjhf" ).click( function (){ var hfnr = $( ".hfpl" ).val(); // alert(hfnr); // alert(ids); $.ajax({ url: "hf-cl.php" , data:{hfnr:hfnr,ids:ids}, type: "post" , datatype: "text" , success: function (data){ alert( "回復成功!" ); window.location.href= "main.php" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ; } }); }) </script> |
到此處為止,動態的發布、動態的評論、動態的回復、動態的刪除都已經寫完了,但是有個問題還還還沒解決完,也就是回復的回復問題。請看下面的簡圖:
也就是回復表中有一部分是回復的評論,而剩余的部分則是回復的回復(有點繞)想看的就繼續關注(下)未完待續~~~
先總結一下遇到的問題:
(1)為什么ajax輸出的button添加不上點擊事件?
因為ajax是異步ajax,所以要緊接其后。
(2)為什么取不到button的值------this
(3)一個php頁面中,什么時候用ajax?什么時候用php?
在這個實例中,我用ajax將數據寫進數據庫;用php從數據庫讀取內容。(上一篇中,動態是用ajax讀取的,在這一篇中,兩種方法都有,詳情請看全部代碼)
(4)最后,邏輯清晰很關鍵,尤其是表與表之間的關聯。