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 
$('#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 に答える
0

ajaxにはjquery getまたはpostを使用できます。

于 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 に答える