html form中的button引起的问题

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里面，所以就出问题了。