JavaScript はルーティングジャンプを防止します

Web 開発では、ルート ジャンプは非常に一般的な操作であり、ユーザーがリンクをクリックするかフォームを送信すると、ページは別のページにジャンプします。しかし、フォーム データの有効性を確認したり、ユーザーの誤操作によるデータ損失を防ぐなど、ユーザーがリンクをクリックしたときやフォームを送信したときのジャンプを制御できるようにしたい場合があります。この場合、JavaScript を使用してルーティング ジャンプを防ぐ必要があります。

1. リンク ジャンプの防止

ユーザーがリンクをクリックすると、ブラウザはデフォルトで対応するページにジャンプします。ただし、ユーザーがリンクをクリックしたときにジャンプする前に何らかの処理を実行したい場合は、デフォルトのジャンプ動作を防ぐ必要があります。この機能は、リンクの onclick イベントに JavaScript コードを追加することで実現できます。

たとえば、リンクは次のとおりです:

<a href="http://www.example.com" onclick="return false;">点击我不会跳转</a>

onclick イベントに「return false;」を追加すると、リンクのデフォルトのジャンプ動作を防ぐことができます。

「return false;」の使用に加えて、event.preventDefault() メソッドを使用してデフォルトのジャンプ動作を防止することもできます。例:

<a href="http://www.example.com" onclick="event.preventDefault();">点击我不会跳转</a>

2. フォームの送信を禁止する

ユーザーがフォームを送信すると、ブラウザはフォーム データをサーバーに送信し、サーバーから返されたページにジャンプします。同様に、フォームを送信する前にフォームを処理して、デフォルトのジャンプ動作を防ぐこともできます。この機能は、フォームの onsubmit イベントに JavaScript コードを追加することで実現できます。

たとえば、次のフォームがあります:

<form onsubmit="return false;">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

onsubmit イベントに「return false;」を追加すると、フォームのデフォルトの送信動作を防ぐことができます。

同様に、event.preventDefault() メソッドを使用して、デフォルトの送信動作を防止することもできます。例:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit" onclick="event.preventDefault();">提交</button>
</form>

3. ルート ジャンプの防止

リンクやフォームでのデフォルトのジャンプ動作を防止するだけでなく、JavaScript を介してルート ジャンプを防止することもできます。ブラウザでは、window オブジェクトの location 属性を通じて現在のページの URL を取得し、ジャンプするように変更できます。

たとえば、現在のページの URL を別のページの URL に変更してルーティング ジャンプを実現できます。

window.location.href = "http://www.example.com";

ジャンプ前にフォーム データなどの処理を行いたい場合検証、条件判断をコードに追加できます。

たとえば、次はフォームです:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="button" onclick="checkForm()">提交</button>
</form>

onclick イベントで checkForm() 関数を呼び出します。この関数では、フォーム データを検証できます。検証が失敗した場合は、いいえジャンプが行われます。

function checkForm() {
  // 表单数据验证
  if (验证失败) {
    return;
  }
  window.location.href = "http://www.example.com";
}

概要

Web 開発では、ルート ジャンプの防止は非常に一般的な操作です。この機能は、JavaScript を介してリンク、フォーム、コードに実装できます。ルートジャンプを防ぐことで、ユーザーがリンクをクリックしたりフォームを送信した後に何らかの処理やチェックを実行し、ユーザーの誤操作によるデータ損失やセキュリティ上の問題を回避できます。

以上がJavaScript はルーティングジャンプを防止しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。