简体   繁体   中英

Like post/print result with ajax

I've created a like button for my users posts. I'm trying to print out the amount of likes. At the moment when I click the LIKE button nothing shows beside the like button unless I refresh the page then it shows the amount of like clicks the post has (4).

The problem I face is I have a LIKE_DO.php page that collects the data then sends it to a function which is in another page called function_user.php. Is there anyway I can use Ajax to grab the printed value of likes and how would I go about it? I would really like to just build ontop of the ajax I already have, to insert the data and make a call for the printed likes to save confusion and having to re-write all my code again.

Like Button

echo "<div class='stream_option'><a id='likecontext_".$streamitem_data['streamitem_id']."' style='cursor:pointer;' onClick=\"likestatus(".$streamitem_data['streamitem_id'].",this.id);\">";

CURRENT AJAX

function likestatus(postid,contextid){
var obj = document.getElementById(contextid);
if(obj.innerHTML=="Like"){
obj.innerHTML="Unlike";
}else{
obj.innerHTML="Like";
}
$.post("../include/like_do.php", { streamitem_id: postid} );
}

LIKE_DO.PHP

<?php
session_start();
require"rawfeeds_load.php";
if(isset($_POST['streamitem_id'])){

$check = user_core::check_liked($_SESSION['id'],$_POST['streamitem_id'],1);

user_core::do_like($_SESSION['id'],$_POST['streamitem_id'],1);
if($check==0){?>
<?php }else{ ?>
<?php }
}else{
echo "<script>alert('Error liking post');</script>";
}
?>

USER_CORE - (With my printed likes that I need to get with ajax)

    function print_like_count($streamid){
        $check      =   "SELECT feedback_id FROM streamdata_feedback WHERE feedback_streamid='$streamid' AND feedback_rating=1";
        $check1     =    mysql_query($check);
        $check2     =    mysql_num_rows($check1);
        if($check2>0){
        return "(".$check2.")";
        }
}

Assuming user_core::do_like() adds like data to the database and user_core::check_liked() returns number of likes made for that posts.

(Correct me if I'm wrong)

if(user_core::do_like($_SESSION['id'],$_POST['streamitem_id'],1)){
echo $check; // as your user_core::check_liked() function returns number of likes.
}else{
echo "<script>alert('Error liking post');</script>";
}

ALSO : Since you are calling say X.php and from X.php you call a function in Y.php. Function in Y.php actually know the value you are looking for.

Since you are calling X.php values that are echo ed in Y.php will not be visible to your script.

Solution - If you are calling X.php then make Y.php return the values to X.php and echo your values in X.php only.

+++++++++++++++++++++

UPDATE As per current latest question:

Change your $.post handler to

$.post("../include/like_do.php", { streamitem_id: postid},function(data){
//see the parameter data in this function. Data contains whatever that you echo in your php file.

$("#yourLikeDisplayDivId").html(data+" Likes");

} );

If you need just to know how many people liked the page: Use XML or JSON to retrieve the data from scripts. Doing so, you can retrieve many pieces of data from scripts. Example:

<?php 
$xml = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<likes>
  <like>
    <number>'.getNumOfLikes().'</number>
  </like>
</likes>' ;
echo $xml ; 
?>

Create a simple ajax request:

var req = new XMLHttpRequest() ;
var url = "../include/like_do.php" ;

function execute(data){
  req.open("POST", url, true) ;
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded") ;
  req.onreadystatechange = function(){
    if (req.readyState == 4 and req.status == 200){
      var xml = req.responseXML ; //Get the xml response
      document.getElementById("numOfLikes").innerHTML = xml.getElementsByTagName()("number")[0].firstChild.nodeValue ; //get the value of the first "number" tag
      req.abort ;
    }
  req.send(data)
  }
}

execute("likeId=1234&anything=123") ;

Other things you do in your PHP scripts (what to display, how much stuff). I hope this helps as you can see how to use an AJAX request.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM