Question

我正在开发一个非常简单的购物车，其中商店中的每个商品（法院）旁边都有一个按钮，如果商品不在购物车中则为+ +如果商品在购物车中则为x。当您单击按钮时，我将提交jQuery / AJAX / PHP以更新购物车信息和总计，以及将产品列表中的按钮更改为x，反之亦然。

以下是商店中的产品系列

<div id="courtline" class="courtline<?php echo $row_Courts['systemID']; ?>">
<a href="#" func="add" stateName="<?php echo $_SESSION['state'];?>" systemID="<?php echo $row_Courts['systemID'];?>" courtSystemID="<?php echo $row_Courts['courtSystem_SystemID']; ?>" userID="<?php echo $_SESSION['userid']; ?>" id="addCourtLinkADD" class="addCourtLinkADD" ><img src="assets/icons/add.gif"  /></a>
</div>

这是我的jQuery。它进行3次AJAX调用......

通过在购物车中添加或删除产品来更新数据库......
根据产品是否在购物车中，将按钮更改为+或x更新产品列表...它还会更改'func'参数以匹配按钮。
更新购物车中的总计div。

$(" #courtline" ).on( "click","a",function( e ) {
    e.preventDefault();
    var func = $(this).attr("func");
    var stateName =  $(this).attr("stateName");
    var courtID = $(this).attr("systemID");
    var userID = $(this).attr("userID");
    var courtSystemID = $(this).attr("courtSystemID");      
    var stateID = $(this).attr("systemID");

    // update the court list in the cart
    $.ajax({

        type: "GET",
        url: "http://subscribe.docketlaw.com/ajaxphp/modifyCourt.php",
        data: "user= " + userID + "& court= " + courtID + "& courtsystem= " + courtSystemID + "& func=" + func,
        timeout: 6000,
        success: function (data)
            {
                $(document).ready(
                    function() {
                        courtList = data;

                        $('div.cartcourtlist').html(courtList);
    // now update the Court Line                
        $.ajax({

            type: "GET",
            url: "http://subscribe.docketlaw.com/ajaxphp/refreshCourtLine.php",
            data: "user= " + userID + "& court= " + courtID + "& courtsystem= " + courtSystemID + "& statename=" + stateName + "& func=" + func,
            timeout: 6000,
            success: function (data)
                {
                    $(document).ready(
                        function() {

                            courtlinediv = data;  

                            $('div.courtline'+courtID).html(courtlinediv);      
            // now update the Totals                
            $.ajax({

                type: "GET",
                url: "http://subscribe.docketlaw.com/ajaxphp/refreshTotal.php",
                data: "user=" + userID + "& court=" + stateID + "& statename=" + stateName,
                timeout: 6000,
                success: function (data)
                    {
                        $(document).ready(
                            function() {
                                totaldiv = data; 

                                $('div.recurringtotal').html(totaldiv);             
                            }
                        );
                    }, 
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        alert("Status refreshTotal: " + textStatus); alert("Error: " + errorThrown); 
                    }   
            });                 
                        }
                    );
                }, 
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                    alert("Status refreshCourtLine: " + textStatus); alert("Error: " + errorThrown); 
                }   
        });                 

                    }
                );
            }, 
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("Status modifyCourt: " + textStatus); alert("Error: " + errorThrown); 
            }   
    });
});

modifyCourt.php中的相关代码。它通过在购物车中添加或删除产品来更新购物车信息。

if ($_GET['func'] == 'add') {

// insert the court into the cart
$insertSQL = sprintf("INSERT INTO cart (sessionid, systemid, courttype) VALUES (%s, %s, %s)",
                       GetSQLValueString($row_Result['sessionID'], "text"),
                       GetSQLValueString($_GET['court'], "int"),
                       GetSQLValueString($_GET['courtsystem'], "int"));

mysql_select_db($database_docketData, $docketData);
$Result1 = mysql_query($insertSQL, $docketData) or die(mysql_error());

} else {

$deleteSQL = sprintf("DELETE FROM cart WHERE systemid=%s AND sessionid = %s",
                       GetSQLValueString($_GET['court'], "int"),
                       GetSQLValueString($row_Result['sessionID'], "text"));

  mysql_select_db($database_docketData, $docketData);
  $Result1 = mysql_query($deleteSQL, $docketData) or die(mysql_error());
}

以下是refreshCourtLine.php中的相关代码，它更新按钮上的按钮和func属性。

refreshCourtLine.php

if ($_GET['func'] == 'add') {
    ?>  <a href="#" func="delete" stateName="<?php echo $_GET['statename'];?>" systemID="<?php echo $_GET['court'];?>" courtSystemID="<?php echo $_GET['courtsystem']; ?>" userID="<?php echo $_GET['user']; ?>" id="removeCourtLinkREMOVE" class="removeCourtLinkREMOVE" ><img src="assets/icons/delete.gif"  /></a>

     <?php } else {
    ?>
    <a href="#" func="add" stateName="<?php echo $_GET['statename'];?>" systemID="<?php echo $_GET['court'];?>" courtSystemID="<?php echo $_GET['courtsystem']; ?>" userID="<?php echo $_GET['user']; ?>" id="addCourtLinkADD" class="addCourtLinkADD" ><img src="assets/icons/add.gif"  /></a> 

    <?php }

所以...当我点击添加按钮时，产品出现在购物车中，按钮变为x，func属性变为“delete”，这是预期的。但是，如果我单击新的x按钮从购物车中删除相同的产品，它会成功地从购物车中删除产品，但它不会将按钮更改回加号并且不会更改func属性。通过调查，我确定当点击通过jQuery生成的按钮时，$_GET['func']中modifyCourt.php的值是正确的（这解释了为什么产品已从购物车中正确删除），但在{{ 1}}，refreshCourtLine.php的值是OLD值。

我在整个jQuery中都使用了alert，它总是显示当前在按钮上的func属性中的值，但是一旦进入refreshCourtLine.php，它就会回到旧值。

如果我刷新页面，按钮会再次正常工作。

我觉得这是范围问题，但我很困惑为什么对$_GET['func']的第一次AJAX调用使用了func属性的新值，但是对modifyCourt.php的第二次AJAX调用使用了旧的价值。

对于长期以及丑陋的代码感到遗憾，但我将不胜感激。

Answer 1

在jQuery的AJAX success事件中，您不必将其余部分包含在$(document).ready()内，因为当最顶层的父文档准备就绪时，该事件已被触发..所以也许这就是问题所在。

根据部分代码，我们不清楚$_GET['func']中的refreshCourtLine.php检索是否存在问题。你可以尝试vardump（）＆＃39; $_GET['func']之前的if，看看它处于什么状态（是否设置？什么值？等）

此外，您使用courtline作为div的ID，并使用自定义coutline[ID]作为类名。为什么不切换那些？因此每个项目都有一个唯一的ID和一般的类名。通过这种方式，这些项目很容易分辨出来。

所以：id="courtline" class="courtline<?php echo $row_Courts['systemID']; ?>"应该变成class="courtline" id="courtline<?php echo $row_Courts['systemID']; ?>"，并且你的AJAX函数中的jQuery选择器也应该被更改。（$('#courtline' + courtID )）

此外，在HTML中使用data-属性而不是自定义属性。浏览器可以更好地处理它们我们jQuery＆＃39; .data('attributename')来获取价值。

请注意，您的click事件绑定是指DIV中的锚点，因此当您想要替换链接时，请使用jQuery＆＃39; .replaceWith( '<a ...></a>' )替换它的HTML使用新链接。（因为.html( .. )替换了元素中的HTML，所以不替换A-tag本身。）

重要：请使用PHP的MySQLi函数，而不是弃用的mysql_query等。请查看PHP文档。同时使用mysqli准备好的安全声明：）

工作前端部分的

示例：https://jsfiddle.net/PhilQ/v3ng3ejt/2/

AJAX调用的PHP脚本中的$ _GET值具有先前值

1 个答案: