jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK

Question

This is somewhat related to other similar questions:

jquery ajax returns error but is success

jquery .ajax always returns error - data being added to databas

Answer 1

After an insane afternoon trying all kinds of combinations, a light bulb went off and I figured out the problem is that my button html was inside a form.

<form>
    <button></button>
</form>

After changing to a regular div, it worked.

<div>
    <button></button>
</div>

Which is -- to me -- absolutely insane. It seems JQuery captures more information than meets the eye when sending the ajax query, and this was messing the response parsing by expecting some form encoded behavior. Does it mean I cannot have special purpose buttons inside my forms? Since I am using Bootstrap, that's "OK" because I can use the a tags for this (tested and worked). But this seems a JQuery bug (version: 1.11.2)