以下是自己试了各种方法得到的总结，或许比较麻烦，不是什么简便方法。但是自己逻辑思维的呈现，请多指教。
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）