非常简单的ajax添加到购物车

Question

非常简单的ajax添加到购物车

phpjqueryajax

5

好的，我正在努力理解如何将某些内容添加到购物车中，并在不重新加载页面的情况下显示在页面上。

因此，我尝试编写一些非常简单的内容，以便我可以理解逻辑如何工作并正确编写。在我的示例中，页面中有一个用于session['cart']的div和一个下拉菜单。

其中一个选项的值为'red'，另一个选项的值为'blue'。当我选择值为'red'的选项时，我希望'red'显示在位于body标记右侧的

中的session['cart']。当我选择值为'blue'的选项时，我希望'blue'显示在session['cart']中。

我正试图通过对名为'cart_update.php'的页面进行ajax post来实现这一点。我已经为更高级别的模型苦苦挣扎了一个星期，我认为编写一些简单的东西让我真正理解和学习发生了什么是一个好主意。任何帮助都非常感谢！

以下是我的代码，我知道它太离谱了。我只是想学习。

index.php

        <?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body {
    margin-top: 200px;
}
</style>
</head>

<body>
<div align="left" style="display:block;width:200px;height:200px;background:#ccc;border:solid 1px #009966;">Color Chosen<br /><?php echo $_SESSION['cart']; ?></div>

<div align="center"><form method="post" action="">
<select id="color-selection">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#color-selection").on("change", function(event){
        var color = $("#color-selection").val();
        var add = "add";
        var dataString = {color: color, type: add}; //JSON-formatted string
        $.ajax({  
            type: "POST",  
            url: "cart_update.php",  
            data: dataString
        });
    });
});
</script>

</body>
</html>

这是我的cart_update.php文件：

<?php
session_start();
$type = json_decode($_POST['type']);
if(isset($_POST["type"]) && $_POST["type"]== $type)
{
    $color = json_decode($_POST['color']);   
    $_SESSION['cart'] = $color;
}
?>

- DSmith

什么都没有发生...我还将 + "type=" + add; 添加到了 dataString 中。 - DSmith

我想修改它，但是它不允许我。 - DSmith

有什么帮助吗？我已经对我目前拥有的进行了编辑，但仍然没有结果。 - DSmith

还是不行吗？你的问题是想让 $_SESSION['cart'] 中显示“红色”或“蓝色”。就我所知，“红色”或“蓝色”应该会出现在 $_SESSION['cart'] 中，只是你没有看到。你期望在哪里“看到”它呢？ - putvande

1

答案已经给出。在您的 AJAX 调用之后，您需要更新您的 div，以便在那里放置您的颜色。 - putvande

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bestprogrammerintheworld · Accepted Answer

当你没有告诉我们错误/警告信息时，很难确定哪些部分出现问题。你应该查看JS控制台（使用Firebug或其他调试工具）。

不过从你的代码来看，我发现了一些问题...

$(document).ready(function(){
    $(".add_to_cart").onClick(function(){
         var dataString = "color=" + color;
          $.ajax({  
          type: "POST",  
          url: "cart_update.php",  
          data: dataString
          });
    });
});

在这种情况下，onClick 不起作用。请使用 on()。http://api.jquery.com/on/ 另外一件事是，发送数据时应该使用 JSON 格式化的字符串。

$(document).ready(function(){
    $(".add_to_cart").on("click", function(event){
        var dataString = {color: color}; //JSON-formatted string
        $.ajax({  
            type: "POST",  
            url: "cart_update.php",  
            data: dataString
        });
    });
});

在你的html中，你使用了带有多个定义颜色的表单的隐藏字段。与此方法不同的是，我会在一个表单中创建一个下拉列表，这样就可以轻松获取颜色的值，而且你不需要为每种颜色创建一个新表单。

类似于这样：

<select id="color-selection">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>

然后在你的js中，你可以通过以下方式获取颜色选择：

color = $("#color-selection").val();

当ajax调用完成时，使用done()回调函数获取响应值。同时指定返回类型也是一个好的习惯。

$(document).ready(function(){
    $(".add_to_cart").on("click", function(event){
        color = $("#color-selection").val();
        var dataString = {color: color}; //JSON-formatted string
        $.ajax({  
            type: "POST",  
            url: "cart_update.php",  
            data: dataString,
            dataType: "json" //This indicates the expected return-type
        }).done(function(data) {
                $("#thecoloris").html(data.color); //response from php. Set the color in the div id="thecolorid"
       }); 

    });
});

在您的 PHP 代码中，您需要解码 JSON 数据：

<?php
session_start();
if(isset($_POST["type"]) && $_POST["type"]=='add')
{
    $color = json_decode($_POST['color']);   
    $_SESSION['cart'] = $color;
}
echo $_POST['color']; //Output color (that is sent to this php through ajax) - This acts as the return value data in the ajax-function done()
?>

通常输出的值应该使用json_encode($variable)进行编码，但在这种情况下，$_POST['color']已经以json格式发送到php，因为它是从js以json格式发送的。