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

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.

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 );

    }
  });

});