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。

我的存法是：

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

 

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

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

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

<script>
// 加载！初始化

window.onload=function(){
var surepublish=document.getElementById('surepublish');
var landid = surepublish.getAttribute('landid');
var xhr=null;
xhr=new XMLHttpRequest();
xhr.open("get","get_qa.php?landid="+landid,true);
xhr.send();

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

}

</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="";
}
}
}


}

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

 

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

$sql="INSERT INTO question_reply(landid,userid,replywho,content,time) VALUES('{$landid}','{$uid}','0','{$content}','{$time}')";
// echo $sql;
$res = mysqli_query($link,$sql);
// echo $res;
if (!$res) {
printf("Error: %s\n", mysqli_error($link));
exit();
}

$output="";
$sql2="SELECT * FROM question_reply LEFT JOIN user_form ON question_reply.userid=user_form.userid where landid=".$landid;
$row2 = mysqli_query($link,$sql2);
while($res2=mysqli_fetch_assoc($row2)){
if($res2['replywho']==0){
$datetime=$res2['time'];
$outputtime=date("Y-m-d H:i:s",$datetime);
if($res2['replywho']==0){
$output .='<div class="qacontainer">
<img id="userimg" src="'.$res2['portrait'].'" alt="">
<div class="qa">
<span class="qaname">'.$res2['username'].'</span> <span class="qatime">'.$outputtime.'</span>
<p class="qaquestion">'.$res2['content'].'</p>
<button class="publish">回复</button>

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

 

             

// 重要！！！！！！！！！！！！！！！！以下就是在为“问题”寻找“回答”

$sql3="SELECT * FROM question_reply LEFT JOIN user_form ON question_reply.userid=user_form.userid where replywho=".$res2['id']." AND landid=".$landid;
// echo $sql3;
$row3 = mysqli_query($link,$sql3);
while($res3=mysqli_fetch_assoc($row3)){
$datetime=$res3['time'];
$outputtime=date("Y-m-d H:i:s",$datetime);
$output .='<div class="reply_box">
<img id="replyimg" src="'.$res3['portrait'].'" alt="">
<div>
<span class="replyname">'.$res3['username'].'</span>
<span class="qatime">'.$outputtime.'</span>
<p>'.$res3['content'].'</p>

</div>

</div>';

}

}
}

}

echo $output;

$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",时间戳);