html form中的button引起的問題__html

Form中包含一個button如

<form>

<button class="btn micro-btn">提交成功。</button>

</form>

然後在點擊button的時候調用jquery.ajax方法。這本來是一個很簡單的問題，顯然就是ajax調用正常工作。但是問題在於ajax調用總是失敗。在ajax的回調中註冊了fail方法，如下：

fail(function(jqxhr, status){
          console.dir(jqxhr);
          console.log(status);
 });

總是能進入fail方法，理由無從直到。並且是fail之後，總是會重新整理當前頁面。這可百思不得其解。在Chrome Developer Tool的Network當中也發現request是不全的，甚至連request method都沒有。response則沒有顯示。

搜尋半天找到這麼一篇文章：http://stackoverflow.com/questions/13892529/ajax-request-fails-cant-see-why. 這裡提到fail代碼為：

$.ajax({    /* ajax options omitted */    error: function (xmlHttpRequest, textStatus, errorThrown) {         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)               return;  // it's not really an error         else              // Do normal error handling});

“ Error with status or readyState == 0 can occur when you cancel ajax request before it completes, or when you navigate to another page or when you refresh page.”

由此可見，還是對於底層的ajax原理瞭解不清楚。調試一看，果然如他所說。所以是發生了什麼事情取消了ajax請求。前面提到頁面會重新整理，這個重新整理實際上取消了ajax請求。為什麼會重新整理呢，搜尋了“form button”之後找到了一些些線索，button是有type屬性的，參考這裡，有三個值，button，reset，submit，而且各個瀏覽器可能預設值不一樣。Chrom似乎預設用的是submit。而這個button又是在form裡面的，所以預設點擊就會submit form了。

這樣解釋就完全行得通了。所以最簡單的方法是將button的type屬性設定為button。第二種方法就是猶如這裡所說的http://stackoverflow.com/questions/8121958/jquery-ajax-post-inside-a-form-prevent-form-submission-on-ajax-call，增加js方法prevernt form submit，或者將button移到form之外。

之前這個button可以正常工作，那是因為button被無意識地寫在form外面。這次無意識的移動到form裡面，所以就出問題了。