Form中包含一个button如


然后在点击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里面,所以就出问题了。