php - 非常简单的ajax添加到购物车-6ren

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

转载作者：搜寻专家更新时间：2023-10-31 22:06:22

25

4

好的，我正在努力思考如何向购物车中添加内容并在不重新加载页面的情况下将其显示在页面中。

所以我试着写一些非常简单的东西，这样我就可以全神贯注地思考逻辑是如何工作的以及如何正确编写的。在我的示例中，我在 session['cart'] 的页面中有一个 div 和一个下拉菜单。

一个选项的值为“red”，另一个选项的值为“blue”。当我选择值为“red”的选项时，我希望“red”显示在 session['cart'] 中正文标记之后的 div 中。当我选择值为“blue”的选项时，我希望“blue”显示在 session['cart'] 中。

我正在尝试通过将 ajax 发布到名为 'cart_update.php' 的页面来执行此操作。一个星期以来，我一直在努力研究一个更高级的模型，我认为只写一些简单的东西是个好主意，这样我才能真正理解和了解到底发生了什么。非常感谢任何帮助!

这是我的代码，我知道它的出路。我只是想学习。

索引.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;
}
?>

最佳答案

如果您不告诉我们您遇到了什么错误/警告，就很难判断什么不起作用。您应该查看您的 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) 以 json 格式编码，但在这种情况下 $_POST['color'] 已经是 json 格式，因为它是以 json 格式从 js 发送到 php .

关于php - 非常简单的ajax添加到购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17903142/

25

4

0

文章推荐： php - .ENV 文件可见

文章推荐： objective-c - 无法在 AppController 中导入 firebase

文章推荐： html - 选择第 n 个 child 选择 1、2、5、6、9、10 等

文章推荐： php - Laravel 未定义函数 openssl_encrypt()

html - 购物车 - 购物车 CSS 中的商品数量
我们都在流行的网站上看到，购物车图标的右上角有一个小图标!我必须在我的 ASP .NET 网页中使用类似的东西。如何让这个图标位于购物车图标的右上角.. 购物车的图标是一个普通的 bootstrap
Cakephp 购物车
Closed. This question does not meet Stack Overflow guidelines 。它目前不接受答案。想改善这个问题吗？更新问题，使其成为 Stack Ov
REST 购物车
可以使用 REST 架构约束来实现购物车吗？我想把我的问题集中在 session 状态上。在实现购物车的典型 MVC 应用程序中，很可能 session 对象将在 session 中管理，购物车作为
Magento 购物车
我的网上商店使用自己的模板，但在我的网站上我使用货币欧元而不是美元。哪里可以编辑啊。 http://i50.tinypic.com/67rvhc.png 最佳答案进入系统>配置。然后在“通用”>“
jQuery 购物车
我想在我的门户中使用购物车。我可以获得 jquery 的购物车插件吗？格纳尼亚尔·祖贝尔最佳答案 http://simplecartjs.com/不是 JQuery，但如果 PayPal 或 Go
c# 购物车
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
PHP 购物车
我正在尝试将产品添加到我的购物车。我收到一条错误消息: 警告:为 foreach() 提供的参数无效它告诉我以下代码出现错误: function isInCart($id) { if (!empt
PHP 购物车添加项目
我目前正在使用 PHP 开发购物车，我正在尝试弄清楚如何使用我编写的代码将商品添加到购物车本身。我的数据库中的项目显示正确，但只有 $item 下的最后一个数组被添加到购物车。以下显示项目。 $res
php - 在laravel项目上未定义路线[购物车]
在我的laravel购物车上，我创建了一个delete函数，使用json或dd函数进行测试时似乎还可以，但是尝试返回路线购物车 View Route [cart] not defined.时，这是一个
.NET MVC 购物车
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
Magento 购物车相同的产品添加到不同的行
将相同的产品添加到购物车时，它正在添加新行，但如果相同的产品 ID 已在购物车中，则需要更新数量。我需要它与数量更新保持一致。最佳答案您需要覆盖 app/code/core/Mage/Sales
显示订单的 PHP 购物车
你好，我正在创建一个用于培训目的的 PHP 商店。我希望用户能够查看他最后下的订单 - 但我很难意识到这一点。我的数据库中有这些表: 客户( child 、姓名、地址...) 产品(pid、pro
php - Javascript 购物车
我正在考虑建立一个迷你购物网站。不涉及支付方式，只是显示和维护的所选产品的总数。这将由商店中的一个人操作以进行和监控销售。概念是:产品应该在页面中显示为大图像，通过点击它们我将它们存储在购物车中。然
php - 购物车-多个属性值
我有以下产品和购物车表格: //产品表 Products: id | Product_value ----------------------- 1 | Product
PHP MYSQL 购物车
我尝试使用 php ang mysql 在 google 中搜索购物车中的代码。当我单击“添加到购物车”按钮时，我的 cart.php 中没有显示任何内容。请帮助我。这是我的产品.php ">ADD
PHP 购物车 - 添加变量
我正在为摄影业务创建 PHP 购物车。这是我尝试的第一个电子商务网站(新手) 我已成功将产品添加到购物车(存储在 session 中)(产品:打印品、 key 圈、磁铁等) 但是我还需要将 image
PHP session 购物车
变量被添加到从另一个页面传递的 session 数组此处为详细信息页面 string(4) "3911" [1]=> string(4) "5005" [2]=> NULL [3]=> strin
ios - 核心数据关系 - 购物车
我的模型中设置了以下核心数据关系。类别 -> 产品 -> 购物车产品 1)) { // handle error } else if (![cartProducts count]) {
javascript - 购物车 - 拖放错误
我已经根据示例实现了jQuery的购物卡:http://jsfiddle.net/RR6z5/1/ 但是有一个小错误。当我将一个元素从产品拖到购物卡，然后无拖放，我从购物卡拖到产品时，产品中的原始元素
Javascript(购物车)出现在其他内容下？
大家好，就 css 和 javascript 而言，我是个新手。我正在使用的新主题是让我的 paypal minicart 显示在内容下方，因此您不能单击它，也不能从中删除内容，但您可以看到购物车稍微

首页

博学

6Ren·AI

商城

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