ホームページ » コーディング » AjaxをHTMLにIntercooler.jsと組み合わせる

    AjaxをHTMLにIntercooler.jsと組み合わせる

    これまでになく簡単になりました 任意のWebサイトにAjaxを追加する. 実際、Webサイト全体を構築することはかなり一般的です Ajaxリクエストを基にしています 呼ばれる シングルページアプリ(またはSPA).

    ただし、これには常に少しのjQueryといくつかの技術的な問題が必要でした。 ページコンテンツを更新する. いくつか必要なだけ 基本的なAjax機能 あなたが使用することができます intercooler.js これをHTMLに取り入れる.

    Intercoolerを使うと、以下のようなHTML属性を書くことができます。 AjaxリクエストURLをネイティブに含む. ユーザーが特定のリンクをクリックすると、あなたはそれを指示することができます Ajaxリクエストが実行されます 通常のクリック操作の代わりに.

    このすべて HTML5のdata- *属性に依存しています といった ic-post-to. この属性をボタンやアンカーリンクに追加すれば、 自動的にjQueryに接続する Ajax POSTリクエストの場合.

    実際にページがあります これらの属性がいっぱい プラグインWebサイトで。これは少しです サンプルコード それがどのように見えるかを見るために:

    私をクリック!

    これは URLにAjax POSTリクエストを送信する / buton_click, そして レスポンスを読み込む コンテナ要素に。 Intercoolerは非常にシンプルなライブラリで、その仕組みを理解したら非常に強力です。.

    これはAjaxの問題をすべて解決するわけではないからだ。 ページの他の部分を自動更新することはできません. また あまり多くのカスタム機能を追加することはできません ページを遅くすることなく、詳細な スパ 本当にすべき カスタムAjaxコードを使用する.

    Intercooler.jsは Ajaxコードを書くためのより意味的な方法 それがロードし、さらにネイティブのフォールバックを提供するように.

    インタークーラーを取り付ける あなただけが必要です jQueryのコピー と一緒に インタークーラーライブラリーのコピー これはGitHubで見つけることができます。できます ダウンロードせずにテスト jQuery CDNとローカルのIntercooler CDNを使用して任意のファイル.

    両方に入れる > タグ あなたのページのヘッダーに, それから、HTML属性を好きな場所に配置するだけです。!

    でのぞき見をする デモページ を見るために デモの全リスト あなたはと遊ぶことができます。私は特に 'Click to Edit'デモが好きです。なぜならそれは可能なこととあなたがこのプラグインをどこまで使えるかを正確に示しているからです。.

    興味のある方 もっと学ぶ チェックアウト リファレンスガイド インタークーラーのHTML属性がいっぱいです。各自 別のアクションを実行します だからそれらすべてを勉強して何を見ることが重要です ぴったり合う あなたのシナリオのために.

    当然、見つけることができます すべてのソースコード GitHubと一緒に無料で 簡単なインストールガイド.