從html字段獲取輸入並將其存儲在JSON對象中（很多輸入字段）

Question

我正在尋找一種從HTML表單獲取輸入並將其存儲到JSON對象以供AJAX使用的方法。 我不能使用普通的$('#id').val(); ，因為您可以在下面看到，其中包含許多字段。 這是一些示例代碼

使用Javascript / jQuery的：

$(document).ready(function() {
    $('.add-to-cart').click(function() {
        var id = $(this).attr('id');
        //var qty = $(this).attr('qty'); <- need the quantity from the field 
        console.log(id);
        //console.log(qty);
        $.ajax({
            url: 'addproduct',
            type: 'POST',
            datazType: 'JSON',
            data: {
                "id": id
                //"qty": qty
            },
            success: function(addedproduct) {
                console.log(addedproduct.name);
                $('#cart').append('<li>'+ addedproduct.name +'</li>');
            },
            error: function() {
                console.log('failed to add product');
            }
        })
    });
});

HTML：

<p class="name">{{$product->name}}</p>
<input type="number" id="qty" class="qty" name="qty">
<button type="submit" id="{{$product->id}}" class="add-to-cart">Add to cart</button>

請幫助我，或者至少在正確的方向上指導我，這必須使用AJAX來實現。

Answer 1

jQuery的selialize方法就是您要尋找的。 它以一種形式序列化輸入的值。

有用的示例： https : //stackoverflow.com/a/6960586/4180481