Question

我有一个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>

然而，只要提交上述函数调用我的表单。可能导致这种情况的原因是什么？

Answer 1

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

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

更改为

<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)
})

Answer 2

尝试将按钮上的'type'属性设置为'button'

<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

jQuery ajax发布奇怪的行为

2 个答案: