Question

我有两个下拉框来选择产品，一个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文件并返回产品名称＆amp;产品价格等，#cart为<li>，没有刷新页面。并且也没有重复相同的产品。请建议我一个好的/安全的方法来做到这一点。

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

Answer 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

我希望它对你有用：）

Answer 2

你可以使用jquery获取或发布ajax。

Answer 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?)
        }
    });
});

Answer 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);
    }
    });
});

简单的购物车

4 个答案:

实施例