简单的购物车答案

【问题标题】：Simple Shopping Cart简单的购物车
【发布时间】：2012-07-22 11:06:34
【问题描述】：

我有 2 个用于选择产品的下拉框和一个用于购物车的 div。

<select id="RAM">
  <option value="1">4 GB</option>
  <option value="2">8 GB</option>
</select>

<select id="HDD">
  <option value="1">300 GB</option>
  <option value="2">500 GB</option>
</select>

<ul id="cart">
  <li>PRODUCT NAME (PRICE)</li>
  <li>PRODUCT NAME (PRICE)</li>
</ul>

我想将此下拉值传递给使用 AJAX 的 PHP 文件，并将产品名称和产品价格等返回到 #cart 作为 <li> 而不刷新页面。并且不重复相同的产品。请建议我一个好的/安全的方法来做到这一点。

客户可以随时更改他选择的内容，例如：4 GB RAM 到 8GB RAM。

【问题讨论】：

标签： php ajax jquery

【解决方案1】：

首先，创建表单：

<form id="form">
  <select name="RAM">
    <option value="0">4 GB</option>
    <option value="1">8 GB</option>
  </select>

  <select name="HDD">
    <option value="0">300 GB</option>
    <option value="1">500 GB</option>
  </select>
</form>

<ul id="cart">
  <li>PRODUCT NAME (PRICE)</li>
  <li>PRODUCT NAME (PRICE)</li>
</ul>

还有ajax代码（我使用jQuery库是因为它兼容所有浏览器）：

$(document).ready(function() {
        $('#form').change(function() {
            $.ajax({
                url: 'script.php',
                type: 'post',
                data: $(this).serialize(),
                dataType: 'json',
                success: function(data) {
                    $('#cart').empty();
                    $.each(data, function(index, value) {
                        var $li = $('<li></li>')
                            .text(value['product'] + ' (price: ' + value['price'] + ')')
                            .appendTo($('#cart'));
                    });
                }
            });
        });
    });

现在你必须编写 PHP 脚本：

<?php

$prices = array(
    'HDD' => array(30, 50),
    'RAM' => array(100, 200)
);

$data = array();
foreach ($_POST as $product => $index)
    $data[] = array('product' => $product, 'price' => $prices[$product][$index]);

print json_encode($data);
exit;

我认为您想保存用户的选择。如果我是对的，请将保存产品添加到 cookie 或数据库中。 Cookie 示例：

setcookie('cart',$data,time()+24*3600*5,'/'); // save cookie for 5 days

希望对你有用:)

【讨论】：

我试过这个。但它返回 [] 作为响应。仍然找不到什么问题...：/
不。一切都与您的回复相同...参数也正确传递。但是php返回[]
对不起，我的错...我在发送之前没有检查代码。它有一些错误。现在代码是正确的（我只更改了 JavaScript 列表）。
现在 100% 正常工作。感谢大侠的帮助，嘿嘿，我还有一个问题。如果客户想要的只是一个 RAM，我们能做什么。

【解决方案2】：

您可以使用 jquery get 或 post 获取 ajax。

【讨论】：

【解决方案3】：

使用.change() 和AJAX。

示例：

$('#RAM').change(function() {
    var value = $('#RAM option:selected').text();
    $.ajax(
    {
        type: 'POST', // Request method
        url: 'yourFile.php?value='+ value, // URL
        dataType: 'html',
        success: function(result)
        {
            // do something here when PHP return result (or nothing?)
        }
    });
});

【讨论】：

@GeoPhoenix val() 将返回“1”或“2”（值属性），而text() 将返回“4 GB”或“8 GB”。这取决于你，你可以选择其中任何一个。

【解决方案4】：

$('#RAM').change(function() {
    var value = $('#RAM').val();
    $.ajax(
    {
    type: 'POST',
    url: 'service.php?value='+ value,
    dataType: 'html',
    success: function(response)
    {
       $('#price').html(response.price);
       $('#name').html(response.name);
    }
    });
});

【讨论】：