Problems caused by buttons in html form

Form contains a button such

Then, call the jquery. ajax method when you click the button. This is a very simple problem, obviously, ajax calls work normally. But the problem is that ajax calls always fail. The fail method is registered in the ajax callback, as follows:

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

You can always enter the fail Method for no reason. After fail, the current page is always refreshed. This can be puzzling. In the Network of Chrome Developer Tool, we also found that the request is incomplete, and even the request method is not. Response is not displayed.

Search for half-day to find this article: http://stackoverflow.com/questions/13892529/ajax-request-fails-cant-see-why. The fail Code mentioned here is:

$.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 ."

We can see that we still do not know the underlying ajax principles clearly. Debugging, as he said. So what happened to cancel the ajax request. As mentioned above, the page will be refreshed, which actually cancels the ajax request. Why is it refreshed? After searching for "form button", I found some clues. The button has the type attribute. For details, there are three values: button, reset, submit, in addition, different browsers may have different default values. Chrom seems to use submit by default. The button is in form, so the default button will submit form.

This can be completely explained. Therefore, the simplest way is to set the type attribute of the button to the button. The second method is as follows: terraform submit, or move the button out of form.

Previously, this button worked normally, because the button was unconsciously written outside the form. This unconscious move to the form, so there is a problem.