masatoz’s blog

プログラミングのメモ、日常の記録

AjaxをやるときのHTMLとサーバー側コードの書き方を整理する

Ajaxをやろうとして沼だったので、書いて整理したい。

jQuery$.ajaxを使う一方で画面遷移が起こらないようにpreventDefaultでブラウザのリクエストを止めるか、そもそもHTMLでSubmitしないようにする必要がある。

NGパターン

Ajaxなのに画面遷移してしまう

Ajaxなのに画面遷移してしまう残念パターン。

HTMLでSubmitする+jsでpreventDefaultしていない

OKパターン

ちゃんと非同期通信できるのは

HTMLでSubmitしない or HTMLでSubmitする+jsでpreventDefaultする

とても参考になるリンクがあったので貼る。

ふじこのプログラミング奮闘記 - jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について