jQuery ajax发表奇怪的行为

我有一个ajax函数来计算和执行特定的验证。jQuery 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>

然而，一旦上述函数调用正在提交我的形式。什么可能导致这个？

来源

2013-03-19 abiieez

因为你打电话给$ ajax。在你的计算函数中。有什么奇怪的呢？ :) – smk 2013-03-19 02:57:25

你怎么触发这个'calculate（）'函数？ – Raptor 2013-03-19 02:57:55

是的，确切地说，这个函数绑定了哪个元素？这是一个按钮或别的东西？ – OQJF 2013-03-19 02:58:47

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

由于您使用的是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-19 03:07:47

谢谢。这工作，但不知何故阿贾克斯验证被称为两次。 – abiieez 2013-03-19 03:13:25

您是否删除了'onclick =“calculate（）;”' – 2013-03-19 03:14:30

现在如果我从元素中删除onclick属性，它现在可以工作。 – abiieez 2013-03-19 03:17:11

尝试上的按钮设置 '类型' 属性 '按钮'

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

类型属性的默认值是 '提交'：https://developer.mozilla.org/en-US/docs/HTML/Element/button

来源

2013-03-19 03:10:18

它解释了很多。谢谢 – abiieez 2013-03-19 03:14:00

jQuery ajax发表奇怪的行为

回答

相关问题