Javascript 从html字段获取输入并将其存储在JSON对象中（许多输入字段）

我正在寻找一种从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');
            }
        })
    });
});

$（文档）.ready（函数（）{
$（'.add to cart'）。单击（函数（）{
var id=$（this.attr（'id'）；
//var qty=$（this.attr（'qty'）；name}

添加到购物车

请帮助我，或者至少指导我正确的方向，这必须使用AJAX实现。
jQuery的方法就是您要寻找的方法。它将输入值序列化为一个表单

有用的示例：
您可以使用属性选择器获取所有类型number的输入，然后使用循环并构建javascript对象。您希望JSON采用什么格式？另外，您可以说
“正如您在下面看到的，有很多字段”
，但我只看到一个
…你缺少一些代码吗？实际上我使用了你的方法，它更干净，项目升级速度更快，你的规模更好。
<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>