jQueryは更新せずにページをジャンプします

jQuery は、動的でインタラクティブな方法で Web サイトを構築するためによく使用される人気のある JavaScript ライブラリです。 jQuery を使用すると、Web サイトの応答性を維持しながら、Web サイトをより魅力的でユーザーフレンドリーにすることができます。 JavaScript や Web ページの制作に関しては、更新せずにページにジャンプするのは非常に一般的なタスクです。この記事では、jQuery を使用してそれを実現する方法を紹介します。

非更新ジャンプ ページとは何ですか?

通常、ユーザーがリンクをクリックするかフォームを送信すると、ブラウザはページ全体を更新します。これにより、ユーザー エクスペリエンスを低下させる不必要な遅延が発生する可能性があります。リフレッシュレス リダイレクトとは、ページ全体を更新せずにユーザーを新しいページにリダイレクトできることを意味します。

なぜ非更新ジャンプ ページを使用するのですか?

最新の Web アプリケーションでは、更新不要のジャンプ ページが非常に重要な部分になっています。

• ユーザー エクスペリエンスの向上: 更新不要のジャンプ ページではページ全体が更新されないため、ユーザーはページ全体が再読み込みされるまで待つ必要がなくなり、時間と不要なトラブルが節約されます。

• 高速読み込み: 更新不要のジャンプ ページはページ コンテンツを非同期で読み込むことができるため、ページの読み込みを高速化し、ユーザー エクスペリエンスを向上させることができます。

• SEO の最適化: ページ全体が完全に更新されるわけではないため、ジャンプ ページを更新するとページのアクセシビリティが向上し、Google やその他の検索エンジンがページ コンテンツのインデックスをより適切に作成できるようになります。

jQuery を使用した更新不要のジャンプ ページの実装

更新不要のジャンプ ページとその利点について学習したので、次は jQuery を使用してそれを実装する方法を見てみましょう。

jQuery の使用は非常に簡単で、数行のコードをクリックするだけで完了します。非更新ジャンプ ページを実現するための簡単な手順は次のとおりです。

• HTML ページを作成します。

• jQuery ライブラリを script タグに追加します。 jQuery ライブラリは jQuery 公式 Web サイトからダウンロードできます。

• AJAX リクエストを処理する関数を作成します。

• jQuery を使用して、更新せずにページにジャンプする機能をトリガーするイベントを定義します。

このプロセスをさらに詳しく見てみましょう。

1. HTML ページの作成

まず、次のコンテンツを含む HTML ページを作成する必要があります:

8b05045a5be5764f313ed5b9168a17e6
4481182a2de328a002a97f0a84d08ebc

<meta charset="UTF-8">
<title>jQuery 无刷新跳转页面示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>jQuery 无刷新跳转页面示例</h1>
<button id="btn">跳转页面</button>

<script>
    $(document).ready(function() {
        // your code goes here
    });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

ここでは、必要な HTML タグと、JavaScript コードを含めるためのボタンおよび script タグが追加されていることがわかります。

2. jQuery ライブラリの追加

次に、jQuery ライブラリを追加する必要があります。ここでは、jQuery CDN を使用して jQuery ライブラリを取得します。

727ec1cd05e5e850767cc7988d52c4352cacc6d41bbb37262a98f745aa00fbf0

これは jQuery からのものになります公式 Web サイトは jQuery ライブラリを取得し、CDN を通じて取得を加速します。

3. AJAX リクエストを処理する関数を作成する

次に、jQuery で、AJAX リクエストを処理する関数を作成する必要があります。たとえば、次のコードを使用できます。

function redirectToPage(url) {

$.ajax({
    url: url,
    type:'GET',
    success: function(data) {
        $('body').html(data);
    },
    error:function (){}

});
}

この関数は URL パラメーターを受け入れ、 AJAX リクエストを使用すると、リクエストがサーバーに送信されます。リクエストが成功すると、返されたデータが HTML の body 要素に挿入されます。

4. jQuery を使用してイベントを定義する

最後に、jQuery コードを追加し、更新せずにページをジャンプする機能をトリガーするイベントを定義する必要があります:

$(ドキュメント).ready(function() {

$('#btn').click(function() {
    redirectToPage('http://www.example.com');
});

});

ここで、redirectToPage() 関数は、ボタンのクリック イベントと URL 'http:/' をリッスンすることによってトリガーされます。 /www.example.com」がパラメータとして渡されます。

このように、ユーザーがボタンをクリックすると、Web ページは更新されずに新しいページにジャンプします。

概要:

jQuery は、開発者がインタラクティブな Web アプリケーションを効率的に構築できるようにする非常に強力なツールです。更新不要のジャンプ ページは、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させる重要な要素です。この記事では、jQuery を使用して更新不要のジャンプ ページを実現し、よりインタラクティブな Web アプリケーションを構築する方法を簡単に紹介します。これらの基本ルーチンを使用すると、jQuery を使用して非常に複雑な Web アプリケーションを簡単に作成できます。

以上がjQueryは更新せずにページをジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。