如何使用ajax在php中编码像按钮？

I want a like button coding like Facebook. I tried it but the problem is that the data return from other PHP file through AJAX doesn't get displayed. Here is my code.

我想像Facebook这样的按钮编码。我尝试过但问题是从其他PHP文件通过AJAX返回的数据没有显示出来。这是我的代码。

SQL

CREATE TABLE `imagedata` (
 `id` int(10) DEFAULT NULL,
 `image` varchar(1000) DEFAULT NULL,
 `upload_by` int(10) DEFAULT NULL
)
CREATE TABLE `likedata` (
 `liked_by` int(10) DEFAULT NULL,
 `image_id` int(10) DEFAULT NULL
)
 CREATE TABLE `userdata` (
  `id` int(2) NOT NULL,
  `names` varchar(10) NOT NULL
 )

db.php

 $cn=mysql_connect("localhost","root","");
if(!$cn){
    echo "Database problem occur.";
    die();
}
$db=mysql_select_db("test",$cn);
if(!$db){
    echo "Database not exist.";
    die();
}
function getLike($tablename,$image_id){
    $num=0;
    $result=mysql_query("select liked_by from $tablename where image_id=$image_id");
    $num=mysql_num_rows($result);
    return $num;
}
function getCheck($tablename,$id,$image_id){
    $n=0;
    $result=mysql_query("select * from $tablename where liked_by=$id and image_id=$image_id");
    $n=mysql_num_rows($result);
    return $n;
}

AJAX.php

<?php
    require_once("db.php");
        session_start();
        if(!isset($_SESSION["id"])){
    echo "Please login";
    die();
        }
        $id=$_SESSION["id"];
    echo "LOGIN ID = ".$id."<p><br></p>";
    $result=mysql_query("select * from imagedata");
    while($row=mysql_fetch_assoc($result)){
    $image_id=$row["id"];
    $pic=$row["image"];
    $upload_by=$row["upload_by"];
    $no=getCheck("likedata",$id,$image_id);
    $num=getLike("likedata",$image_id);
    if($no>0){
        echo "<p><img src='$pic' /></p>";
        echo "<span id='no_likes'>$num</span>&nbsp;&nbsp;<a onclick='ajaxLike($id,$image_id)' id='status'>unlike</a>";
    }
    else{
        echo "<p><img src='$pic' /></p>";
        echo "<span id='no_likes'>$num</span>&nbsp;&nbsp;<a onclick='ajaxLike($id,$image_id)' id='status'>like</a>";
    }

}
?>

AJAX.js

  function ajaxLike(id,image_id){
var doc=new XMLHttpRequest();
var url="like.php";
var data="id="+id+"&image_id="+image_id;
doc.open("POST",url,true);
doc.setRequestHeader("Content-type","application/x-www-form-urlencoded");
doc.onreadystatechange=function(){
    if(doc.readyState==4 && doc.status==200){
        var info=doc.responseText;
        var arr=info.split(" ");
        document.getElementById("no_likes").innerHTML=arr[0];
        document.getElementById("status").innerHTML=arr[1];
    }
}
doc.send(data);
document.getElementById("status").innerHTML="processing.....";
 }

Like.php

<?php 
    require_once("db.php");     
    if($_POST["id"]!="" && $_POST["image_id"]!="" && $_POST["status"]!=""){
        $id=$_POST["id"];
        $image_id=$_POST["image_id"];
        $status=$_POST["status"];
        $no=mysql_num_rows(mysql_query("select * from likedata where liked_by=$id and image_id=$image_id"));
        if($no>0){
            mysql_query("delete from likedata where liked_by=$id and image_id=$image_id");
            $num=mysql_num_rows(mysql_query("select liked_by from likedata where image_id=$image_id"));
            echo $num." "."like";

        }
        else{
            mysql_query("insert into likedata values($id,$image_id)");
            $num=mysql_num_rows(mysql_query("select liked_by from likedata where image_id=$image_id"));
            echo $num." "."unlike";
        }

    }
    ?>

When i check the database after click on like/unlike button it show me the result which i want. Bt it doesn't show on page without refreshing page by F5. Help..

当我点击喜欢/不像按钮后检查数据库时,它会显示我想要的结果。但它没有在没有F5刷新页面的页面上显示。救命..

2 个解决方案

#1

As you described, you never met good conditions in like.php:

正如你所描述的那样,你从未在like.php中遇到过良好的条件:

in AJAX.js, add status=:

在AJAX.js中,添加status =:

var data="id="+id+"&image_id="+image_id + "&status=1";

Then in like.php, this can be true:

然后在like.php中,这可能是真的:

if($_POST["id"]!="" && $_POST["image_id"]!="" && $_POST["status"]!="")

#2

Okay, as you said it shows the right one after refresh, which means that the database is getting the update. So use this way:

好的,正如你所说,它在刷新后显示正确的一个,这意味着数据库正在获得更新。所以使用这种方式:

document.getElementById("status").innerHTML='Unlike';

#1