PHP+sql3实现评论区功能

首先，在这之前，先知道，我是把这个评论区分为，“提问”以及“回答”两部分。

难点一、事件委托！使得按钮生效

我遇到一个问题就是，每次通过PHP，拿到数据库的数据，我把它的HTML拼接好，拼接成字符串再返回到xhr.responseText时，循环输出的这些“提问”，最右边的“回复”按钮 用不了，

这里我最终使用——事件委托 来解决。通过e.target来获取节点。

如果用户点击了“回复”按钮，就弹出“回复输入框”，再次点击“回复”按钮，则隐藏“回复输入框”。

事件委托代码如下：

<script>
var jiazai=document.getElementById('jiazai');
jiazai.onclick=function(ev){
// alert('fdffff');
var e =ev|| window.event;
var target = e.target || window.event.srcElement;
if(e.target.innerHTML=="回复"){
// alert(e.target.getAttribute('btnid'));
// var ra=e.target.nextElementSibling.getAttribute('id');
if(e.target.nextElementSibling.style.display=="none"){
e.target.nextElementSibling.style.display="block";
}else{
e.target.nextElementSibling.style.display="none";
}

}

if(e.target.innerHTML=="发表"){
// 事件委托中最好通过节点之间的关系来获取节点！
// alert(e.target.previousElementSibling.value);
var isuser=0<?php echo $uid; ?>;

// alert(isuser);
if(!isuser){
alert('请先登录！');
}else{
var content=e.target.previousElementSibling.value;
var replywho=e.target.getAttribute('replywho');

var xhr=null;
xhr=new XMLHttpRequest();
xhr.open("get","landscape_reply.php?content="+content+"&landid="+landid+"&replywho="+replywho,true);
xhr.send();

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// console.log(xhr.responseText);
// alert(xhr.responseText);
jiazai.innerHTML=xhr.responseText;
// myquestion.value="";
}
}

}

}

}
</script>

用户点击“发表”按钮，则先判断用户是否登录，登录了才可以进行发表操作。

难点二、数据库的表怎么设计？提问与回答是否放在一张表里？

我是放在一张表里的，如何用户发表的是“提问”，则replywho为0.

否则，用户发表的是“回答”，那么在通过ajax传回答的内容时，记得也要传一个replywho，用户回答的是哪条问题，这里的replywho就等于问题的id。

所以前提是！记得提前存好问题id。

我的存法是：

1 <div class="r_area" style="display:none;" replyid="'.$res2['id'].'">
2 <input type="text" name="question" class="replyarea" placeholder="请写下您的回答！" value="">
3 <button class="publish" replywho="'.$res2['id'].'">发表</button>
4 </div>

在循环输出这个页面的时候，把该条问题的id赋值给“发表回答”的那个按钮。

这样用户发表回答时，就可以通过var replywho=e.target.getAttribute('replywho');拿到replywho，

难点三、分开操作
我把加载页面时，渲染页面单独写在一个<script>中，点击按钮发表之后，需要局部刷新重新渲染页面有单独写在一个<script>中。

 1 <script>
 2 // 加载！初始化
 3 
 4 window.onload=function(){
 5 var surepublish=document.getElementById('surepublish');
 6 var landid = surepublish.getAttribute('landid');
 7 var xhr=null;
 8 xhr=new XMLHttpRequest();
 9 xhr.open("get","get_qa.php?landid="+landid,true);
10 xhr.send();
11 
12 xhr.onreadystatechange = function(){
13 if(xhr.readyState == 4){
14 // alert(xhr.responseText);
15 jiazai.innerHTML=xhr.responseText;
16 }
17 }
18 
19 }
20 
21 </script>

上述代码是在初始化页面。

surepublish.onclick=function(){
// alert(myquestion.value);
// alert(landid);
// var isuser = 0;

var isuser=0<?php echo $uid; ?>;
if(!isuser){
alert('请先登录！');
}else{
var xhr=null;
xhr=new XMLHttpRequest();
xhr.open("get","landscape_qa.php?content="+myquestion.value+"&landid="+landid,true);
xhr.send();

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// alert(xhr.responseText);
jiazai.innerHTML=xhr.responseText;
myquestion.value="";
}
}
}


}

上述代码是，用户在发表 新问题的时候，会触发函数，将发表内容传入数据库的同时，会局部更新（更新评论区），用户发表的问题会立即显示出来。

难点四、如何将问题和回答一一对应渲染在页面上？每一问题怎么找到属于自己的回答？

 1 $sql="INSERT INTO question_reply(landid,userid,replywho,content,time) VALUES('{$landid}','{$uid}','0','{$content}','{$time}')";
 2 // echo $sql;
 3 $res = mysqli_query($link,$sql);
 4 // echo $res;
 5 if (!$res) {
 6 printf("Error: %s\n", mysqli_error($link));
 7 exit();
 8 }
 9 
10 $output="";
11 $sql2="SELECT * FROM question_reply LEFT JOIN user_form ON question_reply.userid=user_form.userid where landid=".$landid;
12 $row2 = mysqli_query($link,$sql2);
13 while($res2=mysqli_fetch_assoc($row2)){
14 if($res2['replywho']==0){
15 $datetime=$res2['time'];
16 $outputtime=date("Y-m-d H:i:s",$datetime);
17 if($res2['replywho']==0){
18 $output .='<div class="qacontainer">
19 <img id="userimg" src="'.$res2['portrait'].'" alt="">
20 <div class="qa">
21 <span class="qaname">'.$res2['username'].'</span> <span class="qatime">'.$outputtime.'</span>
22 <p class="qaquestion">'.$res2['content'].'</p>
23 <button class="publish">回复</button>
24 
25 <div class="r_area" style="display:none;" replyid="'.$res2['id'].'">
26 <input type="text" name="question" class="replyarea" placeholder="请写下您的回答！" value="">
27 <button class="publish" replywho="'.$res2['id'].'">发表</button>
28 </div>
29 </div>
30 </div>';

 1 // 重要！！！！！！！！！！！！！！！！以下就是在为“问题”寻找“回答”
 2 
 3 $sql3="SELECT * FROM question_reply LEFT JOIN user_form ON question_reply.userid=user_form.userid where replywho=".$res2['id']." AND landid=".$landid;
 4 // echo $sql3;
 5 $row3 = mysqli_query($link,$sql3);
 6 while($res3=mysqli_fetch_assoc($row3)){
 7 $datetime=$res3['time'];
 8 $outputtime=date("Y-m-d H:i:s",$datetime);
 9 $output .='<div class="reply_box">
10 <img id="replyimg" src="'.$res3['portrait'].'" alt="">
11 <div>
12 <span class="replyname">'.$res3['username'].'</span>
13 <span class="qatime">'.$outputtime.'</span>
14 <p>'.$res3['content'].'</p>
15 
16 </div>
17 
18 </div>';
19 
20 }
21 
22 }
23 }
24 
25 }
26 
27 echo $output;
28 
29 $sql3="SELECT * FROM question_reply LEFT JOIN user_form ON question_reply.userid=user_form.userid where replywho=".$res2['id']." AND landid=".$landid;

我是每渲染出一条问题，就利用$sql3语句去寻找回答，看看数据库的表中，哪一行的replywho等于目前的这个问题的id，如果找到了，就让 该HTML语句 拼接在$output中。

没有回答的话，就继续渲染下一条问题。

难点五、时间戳转换成 年月日

$time=time();
$sql="INSERT INTO question_reply(landid,userid,replywho,content,time) VALUES('{$landid}','{$uid}','0','{$content}','{$time}')";
$time=time();中的time()就可以获取当前时间的时间戳，再将时间戳存入到表中。

$datetime=$res2['time'];
$outputtime=date("Y-m-d H:i:s",$datetime);

如何转换成年月日：

取出时间戳后，通过date()函数即可。

date("Y-m-d H:i:s",时间戳);