2

我有一个 ajax 函数来计算和执行某个验证。

代码如下所示：

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：

<button id="calculateBtn" class="btn btn-primary" onclick="calculate();">
  <spring:message code="button.calculate" />
</button>

但是，只要提交了名为我的表单的上述函数。这可能是什么原因？

4

2 回答 2

1

尝试将按钮上的“类型”属性设置为“按钮”

<button type="button" id="calculateBtn" class="btn btn-primary" onclick="calculate();">
  <spring:message code="button.calculate" />
</button>

type 属性的默认值为'submit'： https ://developer.mozilla.org/en-US/docs/HTML/Element/button

于 2013-03-19T03:10:18.437 回答
1

这是因为您有一个带有按钮的表单，其默认行为是提交表单。如果您不想提交表单，则需要阻止单击按钮的默认操作。

由于您使用的是 jQuery，我建议使用 jQuery 来注册单击事件而不是使用onclick属性，并且计算方法必须返回false值以防止发生默认单击事件。

改成

<button id="calculateBtn" class="btn btn-primary">
  <spring:message code="button.calculate" />
</button>

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");
        }
    });
    return false;
}
$(function(){
    $('#calculateBtn').click(calculate)
})
于 2013-03-19T03:07:47.283 回答