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

时间:2013-07-23 18:40:56

标签: php javascript jquery html ajax

我的网站上有一个列表,其中包含与列表中每个项目相关联的收藏夹按钮。我使用图像作为单击按钮。它的PHP是:

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

我有javascript / jQuery来对该图像进行onclick,将一个AJAX请求提交给PHP文件。

$(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");
                }
            }
        }
    };

});

});

./ajaxphp/favorites.php上的php文件如下:

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

?>

特别是我关心SQL查询和javascript,因为我不确定它们的正确性,但是我使用jQuery的javascript验证器,一切都是有效的。

当我单击页面上的图像时,即使我测试了图像更改的两个条件,也没有任何反应。要么javascript写得不正确,要么从来没有从favorites.php文件发回回来。

控制台中的网络标签。

enter image description here

1 个答案:

答案 0 :(得分:0)

使用JQuery的.ajax并通过在执行ajax调用之前将其存储在var中来传递单击的元素

$(".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 );

    }
  });

});