0

我有 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。
4

4 回答 4

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 或数据库中。饼干示例：

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

我希望它对你有用:)

于 2012-07-22T11:27:30.590 回答
0

您可以使用 jquery get 或 post 进行 ajax。

于 2012-07-22T11:12:08.053 回答
0

使用.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?)
        }
    });
});
于 2012-07-22T11:12:40.973 回答
0 
$('#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);
    }
    });
});
于 2012-07-22T11:19:47.820 回答