以下是自己试了各种方法得到的总结,或许比较麻烦,不是什么简便方法。但是自己逻辑思维的呈现,请多指教。
userid为用户的id
tnid为游记(即用户点赞收藏的那个东西)的id
collect:这个是用来标记是否点赞过,默认为0(即没点赞过),一点赞就改为1,再取消点赞,则不要变为0,而是变为2(没点赞)
因为0的时候用INSERT语句,1和2状态时,要用UPDATE语句。
<!--icon-->
<div class="icon">
<div class="collect" id="collecttn" onclick="collecttn();">
<img src="<?php
$rs1=$DB->query("SELECT * FROM user_collect WHERE tnid={$id} AND userid={$uid}");
$res1 = $DB->fetch($rs1);
if($res1['collect']==1){
echo 'images/start1.png';
}else if($res1['collect']==2){
echo 'images/start0.png';
}else{
echo 'images/start0.png';
}
?>" alt="" id="collect">
<span id="collcetnum"><?php echo $res['tncollect']; ?></span>
</div>
</div>
img即为图标,刚进入页面时候,图标到底是用"未点赞"还是"已点赞",取决于数据库里的collect的值。数据库的collect是1,就用start1.png。是2就用start0.png,否则(数据库没有这个值),就说明用户从来没点赞过。就用start0.png。
<span>标签里面写的是当前的数量。刚进入页面时候,进行一次SELECT,获取数量。
注意:以上都是用户刚刷进入页面的时候的显示值。
那用户点击之后呢?如下:
通过在js里面,调用ajax(使用ajax的好处就是能进行局部刷新,即你一点赞,就能看到图标切换了的效果,也能看到数量的+1或者-1)
<script>
var collecttn =document.getElementById('collecttn');
var collcetnum=document.getElementById('collcetnum');
var collect =document.getElementById('collect');
var thumb =document.getElementById('thumb');
collecttn.onclick=function(){
// alert('点击了一下');
var xhr=null;
xhr=new XMLHttpRequest();
xhr.open("get","show_icon.php?tnid="+<?php echo $res['tnid']; ?>,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// alert(xhr.responseText);
var arr= JSON.parse(xhr.responseText);
collect.src=arr[0];
collcetnum.innerText=arr[1];
}
}
}
</script>
?我的show_icon.php写的内容如下:
<?php
include 'config.php';
session_start();
$uid=$_SESSION['userid'];
if(!$link){
echo "连接失败";
exit;
}
$tnid=$_GET['tnid'];
$arr = array();
// -----------------------------------------------------------------
mysqli_set_charset($link,"utf8");
mysqli_select_db($link,"travel");
// 每点击一次,重新select一下
$sql="SELECT * FROM user_collect WHERE userid=$uid AND tnid=$tnid";
$res = mysqli_query($link,$sql);
$rs=mysqli_fetch_assoc($res);
// var_dump($rs['collect']);
// num
$sql0="SELECT * FROM travelnote WHERE tnid=$tnid";
$res0 = mysqli_query($link,$sql0);
$rs0=mysqli_fetch_assoc($res0);
$num0=$rs0['tncollect'];
// var_dump($num0);
// -----------------------------------------------------------------
if(is_null($rs['collect'])){
// echo '<script>alert(1);</script>';
$sql1="INSERT INTO user_collect(userid,tnid,collect,icon) VALUES('$uid','$tnid',1,'images/start1.png') ";
$res1 = mysqli_query($link,$sql1);
// echo 'images/start1.png';
$arr = array();
array_push($arr,'images/start1.png');
$newnum=$num0+1;
// var_dump($newnum);
// echo $newnum;
array_push($arr,$newnum);
$sql4="UPDATE travelnote SET tncollect=$newnum WHERE tnid=$tnid";
// var_dump($sql4);
$res4 = mysqli_query($link,$sql4);
echo json_encode($arr);
}
if($rs['collect']==1){
$sql2="UPDATE user_collect SET collect=2,icon='images/start0.png' WHERE userid=$uid AND tnid=$tnid";
$res2 = mysqli_query($link,$sql2);
// echo 'images/start0.png';
$arr = array();
array_push($arr,'images/start0.png');
$newnum=$num0-1;
// var_dump($newnum);
// echo $newnum;
array_push($arr,$newnum);
$sql5="UPDATE travelnote SET tncollect=$newnum WHERE tnid=$tnid";
// var_dump($sql5);
$res5 = mysqli_query($link,$sql5);
echo json_encode($arr);
}else if($rs['collect']==2){
$sql3="UPDATE user_collect SET collect=1,icon='images/start1.png' WHERE userid=$uid AND tnid=$tnid";
$res3 = mysqli_query($link,$sql3);
// echo 'images/start1.png';
$arr = array();
array_push($arr,'images/start1.png');
$newnum=$num0+1;
// var_dump($newnum);
// echo $newnum;
array_push($arr,$newnum);
$sql6="UPDATE travelnote SET tncollect=$newnum WHERE tnid=$tnid";
// var_dump($sql6);
$res6 = mysqli_query($link,$sql6);
echo json_encode($arr);
}
mysqli_close($link);
?>
?每点击一下,就进入show_icon.php,在php里面要重新select一下当前的值。
php返回多个echo,怎么取出返回值?
由于要返回的echo有多个(①返回icon路径? ②返回点击后的数量),所以我把它们放进数组里面
$arr = array();? array_push($arr,'images/start1.png');
array_push($arr,$newnum);
echo json_encode($arr);
然后在js接收的时候,记得把数组转换成字符串形式
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// alert(xhr.responseText);
var arr= JSON.parse(xhr.responseText);
collect.src=arr[0];
collcetnum.innerText=arr[1];
}
}
var arr= JSON.parse(xhr.responseText);? ?//转成字符串 ?collect.src=arr[0];? //取出数组里的第一个值(即点击之后所展示的图标的路径,然后赋值给img的src) ?collcetnum.innerText=arr[1];? //取出数组里的第二个值(即点击之后数量的变化,然后赋值给span的innerTEXT)
|