Problems caused by button in HTML form __html

The form contains a button such as

<form>

<button class= "Btn MICRO-BTN" > submitted successfully. </button>

</form>

Then call the Jquery.ajax method when you click the button. This would have been a very simple question, obviously the AJAX call is working properly. But the problem is that Ajax calls always fail. The Fail method was registered in the Ajax callback, as follows:

Fail (function (JQXHR, status) {
Console.dir (JQXHR);
Console.log (status);
});

There is always a way to get into the fail, for no reason. And after fail, the current page is always refreshed. This can not be solved. In the network of Chrome Developer tool, the request was found to be incomplete, not even the request method. Response is not displayed.

Search half a day to find such an article: Http://stackoverflow.com/questions/13892529/ajax-request-fails-cant-see-why. The fail code here refers to:

$.ajax ({/
    * AJAX Options omitted */
    error:function (XMLHttpRequest, Textstatus, Errorthrown) {
         if ( xmlhttprequest.readystate = 0 | | Xmlhttprequest.status = = 0) return 
              ;  It's not really a 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.

This shows that the underlying AJAX principles are not known. Commissioning a look, sure enough as he said. So what's going on is canceling the AJAX request. The previous mention page refreshes, and this refresh actually cancels the AJAX request. Why refresh, search the "form button" after found some clues, button is a type attribute, reference here, there are three values, Button,reset,submit, and each browser may default value. Chrom seems to default to submit. And this button is in the form, so the default click will submit form.

That would be a complete explanation. So the easiest way to do this is to set the button's Type property to a button. The second approach is like the http://stackoverflow.com/questions/8121958/here. Jquery-ajax-post-inside-a-form-prevent-form-submission-on-ajax-call, add JS method prevernt form Submit, or move button to outside form.

The button was previously working correctly because the button was unconsciously written out of the form. This time the unconscious moved into the form, so there was a problem.