Web 開発では、ユーザーが送信したデータを収集するためにフォームをよく使用しますが、フォーム内のボタンをクリックするとページが更新される場合があり、これはユーザー エクスペリエンスにとって非常に不親切です。なぜこれが起こるのか、そしてそれを修正する方法を見てみましょう。
ページが更新されるのはなぜですか?
デフォルトでは、フォームフォームのボタンの type 属性は submit です。つまり、ユーザーがこのボタンをクリックすると、フォーム内のデータは処理のためにバックグラウンドに自動的に送信されます。このプロセスにより、ページ全体を更新するブラウザのデフォルト動作がトリガーされます。
ページの更新を回避するにはどうすればよいですか?
- デフォルトの動作を防止する
PreventDefault() メソッドを使用すると、デフォルト動作のトリガーを防ぐことができ、それによってページの更新を回避できます。
たとえば、onclick イベントをボタン button に追加し、イベント関数内でevent.preventDefault() メソッドを使用して、デフォルト動作のトリガーを防止します。
<form>
<input type="text" name="name" />
<button onclick="submitForm(event)">Submit</button>
</form>
<script>
function submitForm(event) {
event.preventDefault();
// 处理提交逻辑
}
</script>
- Ajaxを使用する
もう 1 つの方法は、Ajax を使用してフォーム データを送信することで、ページの更新を回避できます。
たとえば、jQuery で実装されたコードは次のとおりです。
<form>
<input type="text" name="name" />
<button onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
$.ajax({
type: 'POST',
url: '/your/url',
data: $('form').serialize(),
success: function(response) {
// 处理成功逻辑
},
error: function(xhr, status, error) {
// 处理错误逻辑
}
});
}
</script>
ページを更新するフォーム送信ボタンのデフォルトの動作に加えて、ページが更新される状況が他にもいくつかあります。たとえば、ユーザーがページ内のリンクをクリックすると、デフォルトの動作がトリガーされ、ページ全体が更新されます。
この問題の解決策も非常に似ており、preventDefault() メソッドを使用してデフォルト動作のトリガーを防ぐことも、Ajax を使用して非同期読み込みを実現することもできます。
要約する
この記事の導入により、フォーム内のボタンをクリックするとページが更新される理由を理解し、ページの更新を回避する 2 つの方法をマスターしました。この知識は、Web ページの対話性とユーザー エクスペリエンスを向上させ、ユーザーのニーズをより適切に満たすのに役立ちます。