如何使onclick ajax请求收藏夹按钮正常工作

Question

I have a list on my site that has a favorites button associated with each item on the list. I am using an image as the button to click. The PHP for it is:

echo "<img src=\"./images/emptystar.png\" alt=\"favorite\" class=\"favoritebutton\" billid=\"" . $count['id'] ."\" userid=\"". $_SESSION['userid'] ."\" />
";

I have javascript/jQuery to make an onclick of that image submit an AJAX request to a PHP file.

$(document).ready(function() {

$(".favoritebutton").click(function () {

var billid = $(this).attr("billid");
var userid = $(this).attr("userid");
var ajaxrequest;
var params = "billid=" + billid + "&userid=" + userid;

ajaxrequest.open("POST","./ajaxphp/favorites.php",true);

ajaxrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxrequest.setRequestHeader("Content-length", params.length);
ajaxrequest.setRequestHeader("Connection", "close");

ajaxrequest.send(params);

ajaxrequest.onreadystatechange=function()
    {
    if (ajaxrequest.readyState===4 && ajaxrequest.status===200)
        {
        if(ajaxrequest.responseText === "true")
            {
            if($(this).attr("src") === "./images/emptystar.png")
                {
                $(this).attr("src","./images/fullstar.png");
                }
            else
                {
                $(this).attr("src","./images/emptystar.png");
                }
            }
        }
    };

});

});

The php file at ./ajaxphp/favorites.php is the following:

<?php
include("./includes/dbcxnfunction.inc");

$billid = $_POST['billid'];
$userid = $_POST['userid'];

$query = "IF NOT EXISTS (SELECT * FROM favoritebills WHERE userid = '$userid' AND billid = '$billid' ) 
              INSERT INTO favoritebills (userid,billid) VALUES($userid,$billid)

          ELSE
              DELETE FROM favoritebills WHERE userid = '$userid' and billid = '$billid' ";

$result = mysqli_query(dbcxn('bill'),$query)
              or exit("Couldn't execute query for favorites");

if($result)
    {
    $request = "true";
    }
else 
    {
        $request = "false";
    }

echo $request;

?>

In particular I am concerned with the SQL query and the javascript because I am not certain of their correctness, but I used a validator for the javascript with JQuery and everything is valid.

When I click the image on the page, nothing happens even though I have tested both conditions for the image change. Either the javascript is written incorrectly, or there is never a response sent back from the favorites.php file.

The network tab in console.

Answer 1

Use JQuery's .ajax and pass the clicked element by storing it in var before you make the ajax call

$(".favoritebutton").click(function () {

  //Store $(this) in var so that it can be passed inside the success function
  var this$ = $(this);

  var billid = this$.attr("billid");
  var userid = this$.attr("userid");


  $.ajax( { url : "./ajaxphp/favorites.php", type: 'post', data : { billid : billid , userid : userid }, 
    success : function( responseText ){

        if( responseText == "true"){

            if( this$.attr("src") == "./images/emptystar.png"){
                this$.attr("src","./images/fullstar.png");
            }else{
                this$.attr("src","./images/emptystar.png");
            }

         }

    },
    error : function( e ){

        alert( ' Error : ' + e );

    }
  });

});