Spring MVC和Ajax验证

Question

I have the following ajax. Whenever the specified input element changes, the function will try to recalculate the total.

$('[name^=quantities]').change(function() {
      calculate();
});
function collectFormData(fields) {
    var data = {};
    for (var i = 0; i < fields.length; i++) {
        var $item = $(fields[i]);
        data[$item.attr('name')] = $item.val();
    }
    return data;
}

function calculate(){
    var $form = $('#purchase-form');
    var $inputs = $form.find('[name]');
    var data = collectFormData($inputs);
    $.ajax({
        url: '${validateUrl}',
        type: 'POST',
        data: data,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    });
}

HTML:

<form id="purchase-form" action="/MyNewApp/purchase" method="post">
...
...
<input id="quantities[0]_id" name="quantities[0]" type="number">
<input id="quantities[1]_id" name="quantities[1]" type="number">
</form>

My handler in Spring

@RequestMapping(value = "/purchaseValidation.json", method = RequestMethod.POST)
    @ResponseBody
    public ValidationResponse validate(
            @ModelAttribute(value = "form") @Valid PurchaseForm form,
            BindingResult result, Locale locale) {
        ValidationResponse res = new ValidationResponse();
        // value of form.getQuantities.get(0) == 0
        // value of form.getQuantities.get(1) == 0
        return res;
    }

PurchaseForm.java

public class PurchaseForm {

    private List<Item> itemList;

    private List<Integer> quantities;

    private boolean starterPackageRequired;

    public PurchaseForm() {

    }
        ...
        ...
}

During my ajax post I can see the value of quantities are 2 and 0, however on my spring handler both values are 0. Any pointer what might cause this ?

Answer 1

Change the name of the input elements from name="quantities[0]" and name="quantities[1]" to name="quantities" .

Note: Also change the selector $('[name^=quantities]') to $('input[name^=quantities]') for performance reasons

Answer 2

I fix it by changing the ajax call function to this:

 $.post('${validateUrl}', data, function(response) {
        $('#ajaxResult').text(response);
    }, 'json');

I guess there must be some difference between $.post and $.ajax