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發表奇怪的行爲

回答

相關問題