Question

我填充了这些数据（正如您将在下一张图片中看到的），用户在一些数字之间，当用户点击添加到购物车（我使用jQuery / Ajax）时，我需要以某种方式将数据作为数组获取，但我无法得到完美的方式。 Actualy你在图像中看到的是一种颜色不同的产品，并且有不同的尺寸，但实际上有更多的产品，逐一添加，因为每个产品都有他的添加到购物车按钮。

Html代码：

<input type="text" data-colorID="1" data-galonID="5"  data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">

Jquery Code，点击添加到购物车按钮：

 var barrel = [];
 $('input[name^=barrel]').each(function(){
    var attribute = $(this).data('attribute');
    barrel.push($(this).val());
});

但不知怎的，我只得到Uncaught TypeError: barrel.push is not a function，当我使用barrel[attribute] = $(this).val();时，我得到Object {Clear: "", Orange: "", Purple: ""}，当我在控制台时记录它。

我希望我的数组看起来像这样：

ProductID1->
colorID1->
    [key=GalonID]->input1 value
    [key=GalonID]->input2 value
    [key=GalonID]->input3 value
    [key=GalonID]->input4 value
colorID2->
    [key=GalonID]->input1 value
    [key=GalonID]->input2 value
    [key=GalonID]->input3 value
    [key=GalonID]->input4 value
colorID3->
    [key=GalonID]->input1 value
    [key=GalonID]->input2 value
    [key=GalonID]->input3 value
    [key=GalonID]->input4 value

请帮助，谢谢！

Answer 1

我将如何做到这一点：

请注意，我已将您的数据属性更改为使用全部小写字母。 Working example

    $('#test').click(function () {
        var data = [];
        $('[data-color-id]').each(function () {
            var $this = $(this);
            var colorID = $this.data('color-id');
            var galonID = $this.data('galon-id');
            var attribute = $this.data('attribute');
            var count = $this.val();
            var name = $this.attr('name');
            // do any needed validation here
            data.push({
                colorID: encodeURIComponent(colorID),
                galonID: encodeURIComponent(galonID),
                count: encodeURIComponent(count),
                attribute: encodeURIComponent(attribute),
                name: name
            });
        });

        $.ajax({
            type: "POST",
            url: "index.php",
            data: {
                data: data
            },
            success: function (response) {
                $('#result').html(response);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

    });

<input type="text" data-color-id="1" data-galon-id="5" data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">
<input type="text" data-color-id="1" data-galon-id="5" data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">
<input type="text" data-color-id="1" data-galon-id="5" data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">
<input type="text" data-color-id="1" data-galon-id="5" data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">
<input type="text" data-color-id="1" data-galon-id="5" data-attribute="Clear" class="form-control ion Clear" name="barrel" aria-describedby="sizing-addon3">
<button id="test"></button>

然后，在php页面上，执行以下操作：

if(isset($_POST["data"])){
    foreach($_POST['data'] as $item)
    {
        echo '<h4>Order Item</h4>';
        echo 'colorID =' .$item['colorID'].'<br>';
        echo 'galonID =' .$item['galonID'].'<br>';
        echo 'attribute =' .$item['attribute'].'<br>';
        echo 'count =' .$item['count'].'<br>';
        echo 'name =' .$item['name'].'<br>';
    }
    exit;
}

如何将此Jquery数据作为数组获取？

1 个答案: