如何在 jquery 中创建多维数组/对象并通过 AJAX 发布

Question

我正在创建一个订单表格，其中包含用户可以购买的订单项目表。输入使用数据属性来存储商品名称和每件价格，如下所示：

<input type="text" class="input-small quantity-input" data-pid="<?php echo $p['id']; ?>" data-min="<?php echo $p['min_qty']; ?>" data-max="<?php echo $p['max_qty']; ?>" data-price="<?php echo $p['price']; ?>" data-name="<?php echo $p['product_name']; ?>" placeholder="quantity...">

除了如何迭代每个数量输入项并将其添加到我可以通过 AJAX Post 发送的多维数组之外，我已经弄清楚了一切。我目前有以下代码，但是当我对 $_POST 值执行 print_r 时，它会显示：不允许的关键字符：新鲜罗非鱼片

    $("#ccform").validate({
  rules: {
    firstName: { required: true },
    lastName: { required: true },
    email: {
        required: true,
        email: true,
    },
    cardNumber: { required: true },
    expMonth: { required: true },
    expYear: { required: true },
    cvv: { required: true },
    address: { required: true },
    city: { required: true },
    state: { required: true },
    zipcode: { required: true },
    phone: { required: true },
  },
  submitHandler: function() {
      var siteUrl = $('#siteUrl').val();
      var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

        var pickupLocation = $('input[name="pickup"]:checked').val();
        var pickupPrice = $('#hidePickupPrice').val();
        var subtotal = $('#hideSubtotal').val();
        var tax = $('#hideTax').val();
        var total = $('#hideTotal').val();

        var firstName = $('#firstName').val();
        var lastName = $('#lastName').val();
        var email = $('#email').val();
        var cardNumber = $('#cardNumber').val();
        var expMonth = $('#expMonth').val();
        var expYear = $('#expYear').val();
        var cvv = $('#cvv').val();
        var address = $('#address').val();
        var address2 = $('#address2').val();
        var city = $('#city').val();
        var state = $('#state').val();
        var zipcode = $('#zipcode').val();
        var phone = $('#phone').val();

        $.ajax({
             type: "POST",
             url: siteUrl + "frontend/pay",
             data: ({ 'orderItems': orderItems, 'pickupLocation': pickupLocation, 'pickupPrice': pickupPrice, 'subtotal': subtotal, 'tax': tax, 'total': total, 'firstName': firstName, 'lastName': lastName, 'email': email, 'cardNumber': cardNumber, 'expMonth': expMonth, 'expYear': expYear, 'cvv': cvv, 'address': address, 'address2': address2, 'city': city, 'state': state, 'zipcode': zipcode, 'phone': phone}),
             success: function(data) {
                 alert('done!');
             }
        });
    },
});

我通常不会这么多地使用 Jquery，所以它可能只是 jquery 对象格式的一个菜鸟问题。另外，我将 Codeigniter 用于 PHP 框架。 You can see the live version here

为了澄清，这是我需要帮助的代码区域。它不是创建多维对象/数组：

var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

Answer 1

您需要引用您的密钥：

obj['orderItem'] = orderItem;
obj['priceEach'] = priceEach;
obj['qty'] = qty;

或者使用点符号：

obj.orderItem = orderItem;
obj.priceEach = priceEach;
obj.qty = qty;

没有引号/点符号就像这样说：

obj['Fresh Tilapia Filets'] = 'Fresh Tilapia Filets';
obj['$2.99'] = '$2.99';
obj[10] = 10;

因为它会评估具有相同名称的变量。