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

时间:2015-02-02 19:37:24

标签: javascript jquery html ajax 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');
            }
        })
    });
});

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实现的。

1 个答案:

答案 0 :(得分:2)

jQuery的selialize方法就是你要找的。它将表格中的输入值序列化。

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